# scheduler-sync-google-calendar

> Read-only month scheduler that loads public US holiday events from a Google Calendar URL feed.

**Framework:** angular  **Component:** Scheduler  **Variant:** sync-google-calendar

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/angular/scheduler-sync-google-calendar.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-angular-schedule
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/scheduler-sync-google-calendar/calendar-integration.component.ts

```typescript
import { Component } from '@angular/core';
import { View, EventSettingsModel, DayService, WeekService, WorkWeekService, MonthService, AgendaService, ScheduleModule } from '@syncfusion/ej2-angular-schedule';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';

@Component({
    // tslint:disable-next-line:component-selector
    selector: 'control-content',
    templateUrl: 'calendar-integration.html',
    providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService],
    standalone: true,
    imports: [ScheduleModule]
})
export class CalendarIntegrationComponent {
  public readonly = true;
  public currentView: View = 'Month';
  private calendarId = 'en.usa%23holiday@group.v.calendar.google.com';
  private publicKey = 'AIzaSyBgbX_tgmVanBP4yafDPPXxWr70sjbKAXM';
  private dataManger: DataManager = new DataManager({
    url: 'https://www.googleapis.com/calendar/v3/calendars/' + this.calendarId + '/events?key=' + this.publicKey,
    adaptor: new WebApiAdaptor(),
    crossDomain: true
  });
  public eventSettings: EventSettingsModel = { dataSource: this.dataManger };

  public onDataBinding(e: Record<string, any>): void {
    const items: Record<string, any>[] = (e['result'] as Record<string, Record<string, any>[]>)['items'];
    const scheduleData: Record<string, any>[] = [];
    if (items.length > 0) {
      for (const event of items) {
        let when: string = event['start']['dateTime'] as string;
        let start: string = event['start']['dateTime'] as string;
        let end: string = event['end']['dateTime'] as string;
        if (!when) {
          when = event['start']['date'] as string;
          start = event['start']['date'] as string;
          end = event['end']['date'] as string;
        }
        scheduleData.push({
          Id: event['id'],
          Subject: event['summary'],
          StartTime: start,
          EndTime: end,
          IsAllDay: !event['start']['dateTime']
        });
      }
    }
    e['result'] = scheduleData;
  }
}

```

### src/components/scheduler-sync-google-calendar/calendar-integration.html

```html
<div class="control-section">
  <ejs-schedule #scheduleObj width='100%' height='650px' [eventSettings]="eventSettings"
    (dataBinding)="onDataBinding($event)" [readonly]="readonly" [(currentView)]="currentView" timezone='UTC'>
    <e-views>
      <e-view option="Day"></e-view>
      <e-view option="Week"></e-view>
      <e-view option="WorkWeek"></e-view>
      <e-view option="Month"></e-view>
      <e-view option="Agenda"></e-view>
    </e-views>
  </ejs-schedule>
</div>

```