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"
}
]
}
})