# 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/js/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.jsx

```jsx
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 = 'en.usa%23holiday@group.v.calendar.google.com';
    let publicKey = 'AIzaSyBgbX_tgmVanBP4yafDPPXxWr70sjbKAXM';
    let dataManger = new DataManager({
        url: 'https://www.googleapis.com/calendar/v3/calendars/' + calendarId + '/events?key=' + publicKey,
        adaptor: new WebApiAdaptor(),
        crossDomain: true
    });
    const onDataBinding = (e) => {
        let items = e.result.items;
        let scheduleData = [];
        if (items.length > 0) {
            for (let event of items) {
                let when = event.start.dateTime;
                let start = event.start.dateTime;
                let end = event.end.dateTime;
                if (!when) {
                    when = event.start.date;
                    start = event.start.date;
                    end = event.end.date;
                }
                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;
```