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