# scheduler-sync-google-calendar

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

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

**Install Package(s)**

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

**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.vue

```vue
<template>
    <div class="schedule-vue-sample">
        <div class="col-md-12 control-section">
            <div class="content-wrapper">
                <ejs-schedule id='Schedule' height="650px" :eventSettings='eventSettings'
                    :readonly="readonly" :dataBinding="dataBinding" :currentView='currentView' timezone='UTC'></ejs-schedule>
            </div>
        </div>
    </div>
</template>
<script>
    import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
    import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda } from "@syncfusion/ej2-vue-schedule";
    
    var calendarId = 'en.usa%23holiday@group.v.calendar.google.com';
    var publicKey = 'AIzaSyBgbX_tgmVanBP4yafDPPXxWr70sjbKAXM';
    var dataManger = new DataManager({
        url: 'https://www.googleapis.com/calendar/v3/calendars/' + calendarId + '/events?key=' + publicKey,
        adaptor: new WebApiAdaptor,
        crossDomain: true
    });

    export default {
        components: {
          'ejs-schedule': ScheduleComponent
        },
        data: function () {
            return {
                selectedDate: new Date(2018, 10, 14),
                readonly: true,
                eventSettings: { dataSource: dataManger },
                currentView: 'Month'
            }
        },
        methods: {
            dataBinding: function (e) {
               var items = e.result.items;
               var scheduleData = [];
               if (items.length > 0) {
                    for (var i = 0; i < items.length; i++) {
                        var event = items[i];
                        var when = event.start.dateTime;
                        var start = event.start.dateTime;
                        var 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;
            },
        },
        provide: {
            schedule: [Day, Week, WorkWeek, Month, Agenda]
        }
    }

</script>

```

### src/components/scheduler-sync-google-calendar/SchedulerView.vue

```vue
<template>
  <Scheduler />
</template>

<script setup>
import Scheduler from '../../components/Scheduler.vue'
</script>
```