Components / Scheduler

Selection

The Scheduler allows you to select several events at once and move them simultaneously by drag-and-drop.

To enable the selection, set the selectable option to true.

To select multiple events:
1. Press the Ctrl key.
1. Select the desired events with the mouse cursor.

<div id="vueapp" class="vue-app">
    <kendo-scheduler :data-source="localDataSource"
                     :date="date"
                     :height="600"
                     :selectable="true"   
                     :show-work-hours="true"                 
                     :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('2018/6/6'),
        startTime: new Date("2018/6/13 11:00 AM"),
        localDataSource: [
            {
              id: 1,
              start: new Date("2018/6/6 08:00 AM"),
              end: new Date("2018/6/6 09:00 AM"),
              title: "Interview"
            },
            {
              id: 2,
              start: new Date("2018/6/6 08:00 AM"),
              end: new Date("2018/6/6 09:00 AM"),
              title: "Meeting"
            }
        ]
    }
})

In this article