# scheduler-sync-google-calendar

> Scheduler pulls events from Google Calendar through a Web-API adaptor and key.

**Framework:** react  **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/react/ts/scheduler-sync-google-calendar.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-react-schedule @syncfusion/ej2-data
```

**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/Scheduler.tsx

```tsx
import { ScheduleComponent, ViewsDirective, Inject, Day, WorkWeek, Month, Week, Agenda, ViewDirective } from '@syncfusion/ej2-react-schedule';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
/**
 * schedule google calendar integration sample
 */

const CalendarIntegration = () => {
    let calendarId: string = 'en.usa%23holiday@group.v.calendar.google.com';
    let publicKey: string = 'AIzaSyBgbX_tgmVanBP4yafDPPXxWr70sjbKAXM';
    let dataManger: DataManager = new DataManager({
        url: 'https://www.googleapis.com/calendar/v3/calendars/' + calendarId + '/events?key=' + publicKey,
        adaptor: new WebApiAdaptor(),
        crossDomain: true
    });

    const onDataBinding = (e: Record<string, any>): void => {
        let items: Record<string, any>[] = (e.result as Record<string, Record<string, any>[]>).items;
        let scheduleData: Record<string, any>[] = [];
        if (items.length > 0) {
            for (let 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;
    }
    return (
        <div className='schedule-control-section'>
            <div className='col-lg-12 control-section'>
                <div className='control-wrapper drag-sample-wrapper'>
                    <div className="schedule-container">
                        <ScheduleComponent width='100%' height='650px' readonly={true} eventSettings={{ dataSource: dataManger }} dataBinding={onDataBinding} currentView='Month' timezone='UTC'>
                            <ViewsDirective>
                                <ViewDirective option='Day' />
                                <ViewDirective option='Week' />
                                <ViewDirective option='WorkWeek' />
                                <ViewDirective option='Month' />
                                <ViewDirective option='Agenda' />
                            </ViewsDirective>
                            <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
                        </ScheduleComponent>
                    </div>
                </div>
            </div>
        </div>
    );
}
export default CalendarIntegration;
```