change

Fired when the user selects a cell or event in the scheduler.

Make sure you enabled the selectable option of the Scheduler, in order to be able to trigger a change event.

The event handler function context (available via the this keyword) will be set to the widget instance.

Event Data

e.start Date

The selection start date.

e.end Date

The selection end date.

e.events Array

A list of the selected scheduler events.

e.slots Array

A list of the selected slots. Each slot has the following properties:

• slot.start
  • The slot's start date.
• slot.end
  • The slot's end date.
• slot.element
  • The slot's element.

e.resources Object

The resources for the slot if resource grouping is enabled.

e.sender kendo.ui.Scheduler

The widget instance which fired the event.

Example - subscribe to the "change" event during initialization

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [ "day", "month" ],
  selectable:true,
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ],
  change: function(e) {
    var start = e.start;
    var end = e.end;

/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(kendo.format("Selection between {0:g} and {1:g}", start, end));
  }
});
</script>

Example - subscribe to the "change" event after initialization

<div id="scheduler"></div>
<script>
function scheduler_change(e) {
    var start = e.start;
    var end = e.end;

/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(kendo.format("Selection between {0:g} and {1:g}", start, end));
}

$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [ "day", "month" ],
  selectable:true,
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.bind("change", scheduler_change);
</script>