Load Public Google Calendar Events

import { CommonModule } from '@angular/common';
import { Component, NgZone, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  MbscCalendarEvent,
  MbscEventcalendarView,
  MbscModule,
  MbscPageLoadingEvent,
  Notifications,
  setOptions ,
} from '@mobiscroll/angular';
import { googleCalendarSync } from '@mobiscroll/calendar-integration';

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

const CALENDAR_ID = 'theacidmedia.net_8l6v679q5j2f7q8lpmcjr4mm3k@group.calendar.google.com';

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent implements OnInit {
  constructor(
    public notify: Notifications,
    public zone: NgZone,
  ) {}

  currentView = 'agenda';
  firstDay!: Date;
  lastDay!: Date;
  isLoading = false;
  myEvents: MbscCalendarEvent[] = [];
  myView: MbscEventcalendarView = {
    calendar: { type: 'week' },
    agenda: { type: 'week' },
  };

  onPageLoading(event: MbscPageLoadingEvent): void {
    const start = event.viewStart;
    const end = event.viewEnd;

    // Calculate dates
    // (pre-load events for previous and next pages as well)
    if (this.currentView === 'month') {
      this.firstDay = start;
      this.lastDay = end;
    } else {
      this.firstDay = new Date(start.getFullYear(), start.getMonth(), start.getDate() - 7);
      this.lastDay = new Date(end.getFullYear(), end.getMonth(), end.getDate() + 7);
    }
    this.loadEvents();
  }

  onError(resp: { error?: string; result: { error: { message: string } } }): void {
    this.notify.toast({
      message: resp.error ? resp.error : resp.result.error.message,
    });
  }

  loadEvents(): void {
    this.isLoading = true;
    googleCalendarSync
      .getEvents(CALENDAR_ID, this.firstDay, this.lastDay)
      .then((resp) => {
        this.zone.run(() => {
          this.myEvents = resp;
          this.isLoading = false;
        });
      })
      .catch((error) => {
        this.onError(error);
      });
  }

  changeView(): void {
    setTimeout(() => {
      switch (this.currentView) {
        case 'month':
          this.myView = { calendar: { labels: true } };
          break;
        case 'week':
          this.myView = { scheduler: { type: 'week' } };
          break;
        case 'day':
          this.myView = { scheduler: { type: 'day' } };
          break;
        case 'agenda':
        default:
          this.myView = {
            calendar: { type: 'week' },
            agenda: { type: 'week' },
          };
          break;
      }
    });
  }

  ngOnInit(): void {
    googleCalendarSync.init({
      apiKey: '<YOUR_GOOGLE_API_KEY>',
      onInit: () => {
        this.loadEvents();
      },
    });
  }
}

<mbsc-eventcalendar
  [data]="myEvents"
  [exclusiveEndDates]="true"
  [headerTemplate]="customHeaderTemplate"
  [view]="myView"
  (onPageLoading)="onPageLoading($event)"
>
  <ng-template #customHeaderTemplate>
    <mbsc-calendar-nav class="mds-google-cal-nav"></mbsc-calendar-nav>
    <div [style.visibility]="isLoading ? 'visible' : 'hidden'" class="mds-loader"></div>
    <div class="mds-google-cal-switch mbsc-flex-1-0">
      <mbsc-segmented-group [(ngModel)]="currentView" (change)="changeView()">
        <mbsc-segmented value="month">Month</mbsc-segmented>
        <mbsc-segmented value="week">Week</mbsc-segmented>
        <mbsc-segmented value="day">Day</mbsc-segmented>
        <mbsc-segmented value="agenda">Agenda</mbsc-segmented>
      </mbsc-segmented-group>
    </div>
    <mbsc-calendar-prev class="mds-google-cal-prev"></mbsc-calendar-prev>
    <mbsc-calendar-today class="mds-google-cal-today"></mbsc-calendar-today>
    <mbsc-calendar-next class="mds-google-cal-next"></mbsc-calendar-next>
  </ng-template>
</mbsc-eventcalendar>

.mds-google-cal-switch .mbsc-segmented {
  max-width: 300px;
  margin: 0 auto;
}

.mds-google-cal-nav {
  width: 200px;
}

.mds-loader {
  width: 32px;
  height: 32px;
  border: 4px solid #8c8c8c;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: mds-loader-rotation 1s linear infinite;
  visibility: hidden;
}

@keyframes mds-loader-rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Material header order */

.mbsc-material.mds-google-cal-prev {
  order: 1;
}

.mbsc-material.mds-google-cal-next {
  order: 2;
}

.mbsc-material.mds-google-cal-nav {
  order: 3;
}

.mbsc-material .mds-google-cal-switch {
  order: 4;
}

.mbsc-material .mds-google-cal-today {
  order: 5;
}

/* Windows header order */

.mbsc-windows.mds-google-cal-nav {
  order: 1;
}

.mbsc-windows.mds-google-cal-prev {
  order: 2;
}

.mbsc-windows.mds-google-cal-next {
  order: 3;
}

.mbsc-windows .mds-google-cal-switch {
  order: 4;
}

.mbsc-windows .mds-google-cal-today {
  order: 5;
}