Data Binding

The Scheduler provides support for binding it to local data arrays and to remote data services.

Binding to Local Data Arrays

The following example demonstrates how to create a Scheduler and bind it to a local data source.

<div id="vueapp" class="vue-app">
    <kendo-scheduler :data-source="localDataSource"
                     :date="date"
                     :height="600"
                     :timezone="'Etc/UTC'">
      <kendo-scheduler-view :type="'day'"></kendo-scheduler-view>
      <kendo-scheduler-view :type="'workWeek'" :selected="true"></kendo-scheduler-view>
      <kendo-scheduler-view :type="'week'"></kendo-scheduler-view>
      <kendo-scheduler-view :type="'month'"></kendo-scheduler-view>
      <kendo-scheduler-view :type="'agenda'"></kendo-scheduler-view>
    </kendo-scheduler>
</div>
Vue.use(SchedulerInstaller);

new Vue({
    el: "#vueapp",
    data: {
        date: new Date('2013/6/6'),
        localDataSource: [
            {
              id: 1,
              start: new Date("2013/6/6 08:00 AM"),
              end: new Date("2013/6/6 09:00 AM"),
              title: "Interview"
            },
            {
              id: 2,
              start: new Date("2013/6/6 08:00 AM"),
              end: new Date("2013/6/6 09:00 AM"),
              title: "Meeting"
            }
        ]
    }
})

Binding to Remote Data Services

You can bind the Scheduler to a remote dataset by either:

Using the SchedulerDataSource Component

The following example demonstrates how to bind the Scheduler to a remote SchedulerDataSource component.

<div id="vueapp" class="vue-app">
    <kendo-schedulerdatasource ref="remoteDataSource"  
                               :batch="true"
                               transport-read-url="https://demos.telerik.com/kendo-ui/service/tasks"
                               transport-read-data-type="jsonp"
                               transport-update-url="https://demos.telerik.com/kendo-ui/service/tasks/update"
                               transport-update-data-type="jsonp"
                               transport-create-url="https://demos.telerik.com/kendo-ui/service/tasks/create"
                               transport-create-data-type="jsonp"
                               transport-destroy-url="https://demos.telerik.com/kendo-ui/service/tasks/destroy"
                               transport-destroy-data-type="jsonp"
                               :transport-parameter-map="parameterMap"
                               schema-model-id="taskId"
                               :schema-model-fields="fields">
    </kendo-schedulerdatasource>

    <kendo-scheduler data-source-ref="remoteDataSource"
                     :date="date"
                     :startTime="startTime"
                     :height="600"
                     :timezone="'Etc/UTC'">
        <kendo-scheduler-view :type="'day'"></kendo-scheduler-view>
        <kendo-scheduler-view :type="'workWeek'" :selected="true"></kendo-scheduler-view>
        <kendo-scheduler-view :type="'week'"></kendo-scheduler-view>
        <kendo-scheduler-view :type="'month'"></kendo-scheduler-view>
        <kendo-scheduler-view :type="'agenda'"></kendo-scheduler-view>
    </kendo-scheduler>
</div>
Vue.use(SchedulerInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: "#vueapp",
    data: {
        date: new Date('2013/6/13'),
        startTime: new Date('2013/6/13 07:00 AM'),
        fields: {
            taskId: { from: 'TaskID', type: 'number' },
            title: { from: 'Title', defaultValue: 'No title', validation: { required: true } },
            start: { type: 'date', from: 'Start' },
            end: { type: 'date', from: 'End' },
            startTimezone: { from: 'StartTimezone' },
            endTimezone: { from: 'EndTimezone' },
            description: { from: 'Description' },
            recurrenceId: { from: 'RecurrenceID' },
            recurrenceRule: { from: 'RecurrenceRule' },
            recurrenceException: { from: 'RecurrenceException' },
            isAllDay: { type: 'boolean', from: 'IsAllDay' }
        }
    },
    methods: {
        parameterMap: function (options, operation) {
            if (operation !== 'read' && options.models) {
                return {models: kendo.stringify(options.models)}
            }
        }
    }
})

Using the data Method

The following example demonstrates how to bind the Scheduler to remote data by using the data method.

<div id="vueapp" class="vue-app">
    <kendo-scheduler :data-source="remoteDataSource"
                     :date="date"
                     :startTime="startTime"
                     :height="600"
                     :timezone="'Etc/UTC'">
        <kendo-scheduler-view :type="'day'"></kendo-scheduler-view>
        <kendo-scheduler-view :type="'workWeek'" :selected="true"></kendo-scheduler-view>
        <kendo-scheduler-view :type="'week'"></kendo-scheduler-view>
        <kendo-scheduler-view :type="'month'"></kendo-scheduler-view>
        <kendo-scheduler-view :type="'agenda'"></kendo-scheduler-view>
    </kendo-scheduler>
</div>
Vue.use(SchedulerInstaller);

new Vue({
    el: "#vueapp",
    data: {
        date: new Date('2013/6/13'),
        startTime: new Date('2013/6/13 07:00 AM'),
        remoteDataSource: new kendo.data.SchedulerDataSource({
            transport: {
                read: {
                    url: 'https://demos.telerik.com/kendo-ui/service/tasks',
                    dataType: 'jsonp'
                },
                update: {
                    url: 'https://demos.telerik.com/kendo-ui/service/tasks/update',
                    dataType: 'jsonp'
                },
                create: {
                    url: 'https://demos.telerik.com/kendo-ui/service/tasks/create',
                    dataType: 'jsonp'
                },
                destroy: {
                    url: 'https://demos.telerik.com/kendo-ui/service/tasks/destroy',
                    dataType: 'jsonp'
                }
            },
            schema: {
                model: {
                    fields: {
                        taskId: { from: 'TaskID', type: 'number' },
                        title: { from: 'Title', defaultValue: 'No title', validation: { required: true } },
                        start: { type: 'date', from: 'Start' },
                        end: { type: 'date', from: 'End' },
                        startTimezone: { from: 'StartTimezone' },
                        endTimezone: { from: 'EndTimezone' },
                        description: { from: 'Description' },
                        recurrenceId: { from: 'RecurrenceID' },
                        recurrenceRule: { from: 'RecurrenceRule' },
                        recurrenceException: { from: 'RecurrenceException' },
                        isAllDay: { type: 'boolean', from: 'IsAllDay' }
                    }
                }
            }
        })
    }
})

In this article