Moving and Resizing

You can render a Scheduler that can be moved and resized by dragging.

The Scheduler also enables you to specify whether the component will snap events to the nearest slot during dragging (resizing or moving) or it will allow the move and resize actions without limitations. To set the specific behaviour on the move and resize actions, use the snap property and set it to a Boolean value.

<div id="vueapp" class="vue-app">
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">Snap events to slot boundaries</label>

    <kendo-scheduler ref="scheduler"
                     :data-source="localDataSource"
                     :date="date"
                     :height="600"
                     :snap="checked"
                     :selectable="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",
    watch: {
        'checked': function (newValue){
            var scheduler = this.$refs.scheduler.kendoWidget()
            scheduler.options.snap = newValue;
            scheduler.view(scheduler.view().name);
        }
    },
    data: {
        checked: true,
        date: new Date('2018/6/6'),
        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