{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "scheduler-sync-google-calendar",
  "framework": "vue",
  "type": "registry:component",
  "component": "Scheduler",
  "variant": "sync-google-calendar",
  "dependencies": [
    "@syncfusion/ej2-data",
    "@syncfusion/ej2-vue-schedule"
  ],
  "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/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/scheduler-sync-google-calendar.md"
  },
  "files": [
    {
      "target": "src/components/scheduler-sync-google-calendar/Scheduler.vue",
      "content": "<template>\n    <div class=\"schedule-vue-sample\">\n        <div class=\"col-md-12 control-section\">\n            <div class=\"content-wrapper\">\n                <ejs-schedule id='Schedule' height=\"650px\" :eventSettings='eventSettings'\n                    :readonly=\"readonly\" :dataBinding=\"dataBinding\" :currentView='currentView' timezone='UTC'></ejs-schedule>\n            </div>\n        </div>\n    </div>\n</template>\n<script>\n    import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';\n    import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda } from \"@syncfusion/ej2-vue-schedule\";\n    \n    var calendarId = 'en.usa%23holiday@group.v.calendar.google.com';\n    var publicKey = 'AIzaSyBgbX_tgmVanBP4yafDPPXxWr70sjbKAXM';\n    var 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\n    export default {\n        components: {\n          'ejs-schedule': ScheduleComponent\n        },\n        data: function () {\n            return {\n                selectedDate: new Date(2018, 10, 14),\n                readonly: true,\n                eventSettings: { dataSource: dataManger },\n                currentView: 'Month'\n            }\n        },\n        methods: {\n            dataBinding: function (e) {\n               var items = e.result.items;\n               var scheduleData = [];\n               if (items.length > 0) {\n                    for (var i = 0; i < items.length; i++) {\n                        var event = items[i];\n                        var when = event.start.dateTime;\n                        var start = event.start.dateTime;\n                        var 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        },\n        provide: {\n            schedule: [Day, Week, WorkWeek, Month, Agenda]\n        }\n    }\n\n</script>\n"
    },
    {
      "target": "src/components/scheduler-sync-google-calendar/SchedulerView.vue",
      "content": "<template>\n  <Scheduler />\n</template>\n\n<script setup>\nimport Scheduler from '../../components/Scheduler.vue'\n</script>"
    }
  ]
}