change

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

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;

    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;

    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>
In this article
Not finding the help you need?