{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "scheduler-sync-google-calendar",
  "framework": "react",
  "type": "registry:component",
  "component": "Scheduler",
  "variant": "sync-google-calendar",
  "dependencies": [
    "@syncfusion/ej2-react-schedule",
    "@syncfusion/ej2-data"
  ],
  "description": "Scheduler pulls events from Google Calendar through a Web-API adaptor and key.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": true,
    "platformIndex": "https://ai.syncfusion.com/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/ts/scheduler-sync-google-calendar.md"
  },
  "files": [
    {
      "target": "src/components/scheduler-sync-google-calendar/Scheduler.tsx",
      "content": "import { ScheduleComponent, ViewsDirective, Inject, Day, WorkWeek, Month, Week, Agenda, ViewDirective } from '@syncfusion/ej2-react-schedule';\nimport { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';\n/**\n * schedule google calendar integration sample\n */\n\nconst CalendarIntegration = () => {\n    let calendarId: string = 'en.usa%23holiday@group.v.calendar.google.com';\n    let publicKey: string = 'AIzaSyBgbX_tgmVanBP4yafDPPXxWr70sjbKAXM';\n    let dataManger: DataManager = new DataManager({\n        url: 'https://www.googleapis.com/calendar/v3/calendars/' + calendarId + '/events?key=' + publicKey,\n        adaptor: new WebApiAdaptor(),\n        crossDomain: true\n    });\n\n    const onDataBinding = (e: Record<string, any>): void => {\n        let items: Record<string, any>[] = (e.result as Record<string, Record<string, any>[]>).items;\n        let scheduleData: Record<string, any>[] = [];\n        if (items.length > 0) {\n            for (let event of items) {\n                let when: string = event.start.dateTime as string;\n                let start: string = event.start.dateTime as string;\n                let end: string = event.end.dateTime as string;\n                if (!when) {\n                    when = event.start.date as string;\n                    start = event.start.date as string;\n                    end = event.end.date as string;\n                }\n                scheduleData.push({\n                    Id: event.id,\n                    Subject: event.summary,\n                    StartTime: start,\n                    EndTime: end,\n                    IsAllDay: !event.start.dateTime\n                });\n            }\n        }\n        e.result = scheduleData;\n    }\n    return (\n        <div className='schedule-control-section'>\n            <div className='col-lg-12 control-section'>\n                <div className='control-wrapper drag-sample-wrapper'>\n                    <div className=\"schedule-container\">\n                        <ScheduleComponent width='100%' height='650px' readonly={true} eventSettings={{ dataSource: dataManger }} dataBinding={onDataBinding} currentView='Month' timezone='UTC'>\n                            <ViewsDirective>\n                                <ViewDirective option='Day' />\n                                <ViewDirective option='Week' />\n                                <ViewDirective option='WorkWeek' />\n                                <ViewDirective option='Month' />\n                                <ViewDirective option='Agenda' />\n                            </ViewsDirective>\n                            <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />\n                        </ScheduleComponent>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n}\nexport default CalendarIntegration;"
    }
  ]
}