All Components

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