All Components

Basics

The Scheduler allows you to assign events to a set of predefined resources.

The available resource instances are:

Single-Instance Resources

A single instance resource is a resource of which only one instance can be assigned to a Scheduler event. A typical example is a Scheduler displaying a list of meetings (Scheduler events), which are held in two rooms (resources). Since a meeting can be held in one room it can be considered a single resource.

<div id="vueapp" class="vue-app">
    <kendo-scheduler :data-source="localDataSource"
                     :date="date"
                     :height="600"
                     :timezone="'Etc/UTC'"
                     :resources="resources">
        <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 11:00 AM"),
                end: new Date("2013/6/6 1:00 PM"),
                title: "Meeting with investors",
                roomId: 1 // The unique identifier of the first room (Meeting Room 101)
            },
            {
                id: 2,
                start: new Date("2013/6/6 10:15 AM"),
                end: new Date("2013/6/6 12:30 PM"),
                title: "Job Interview",
                roomId: 2 // The unique identifier of the second room (Meeting Room 102)
            }
        ],
        resources: [
        {
            field: "roomId", // The field of the Scheduler event which contains the resource identifier.
            title: "Room", // The label displayed in the Scheduler edit form for this resource.
            dataSource: [
                {
                    text: "Meeting Room 101", // Text of the resource instance
                    value: 1, // The identifier of the resource instance. Use that value to assign an event to this instance.
                    color: "#1c9ec4" // Used as the background of events assigned to this resource.
                },
                { text: "Meeting Room 102", value: 2, color: "#ff7663" }
            ]
        }
      ]
    }
})

Multiple-Instance Resources

Multiple instance resources are the resources to which allow the assigning of more than one instance to a Scheduler event—for example, a Scheduler which displays a list of meetings and the meeting attendees. Because more than one attendee can participate in a meeting, it represents a multiple-instance resource.

<div id="vueapp" class="vue-app">
    <kendo-scheduler :data-source="localDataSource"
                     :date="date"
                     :height="600"
                     :timezone="'Etc/UTC'"
                     :resources="resources">
        <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 11:00 AM"),
                end: new Date("2013/6/6 1:00 PM"),
                title: "Meeting with investors",
                attendees: [2, 3] // Bob (value: 2) and Charlie (value: 3)
            },
            {
                id: 2,
                start: new Date("2013/6/6 10:15 AM"),
                end: new Date("2013/6/6 12:30 PM"),
                title: "Job Interview",
                attendees: [1, 2] // Alex (value: 1) and Bob (value: 2)
            }
        ],
        resources: [
            {
                field: "attendees", // The field of the Scheduler event which contains the resource identifier.
                title: "Attendees", // The label displayed in the Scheduler edit form for this resource.
                dataSource: [
                    {
                        text: "Alex", // Text of the resource instance.
                        value: 1, // The identifier of the resource instance. Use that value to assign an event to this instance.
                        color: "#ef701d" // Used as the background of events assigned to this resource.
                    },
                    { text: "Bob", value: 2, color: "#5fb1f7" },
                    { text: "Charlie", value: 3, color: "#35a964" }
                ],
                multiple: true // Indicate that this is a multiple instance resource.
            }
        ]
    }
})
In this article