Use Local Observable Data Object

The following example demonstrates how to bind the Scheduler to a local observableObject and change the properties during runtime.

Example

    <div id="example">
      <button id="update">Update</button>
      <div id="scheduler"></div>
    </div>
    <script>
      $(function() {
        var data = [{
          title: "Test",
          start: new Date(2013, 5, 13, 10),
          end: new Date(2013, 5, 13, 11)
        }];

        var observableData = new kendo.data.ObservableArray(data);

        $("#scheduler").kendoScheduler({
          date: new Date("2013/6/13"),
          startTime: new Date("2013/6/13 07:00 AM"),
          height: 600,
          views: [
            "day"
          ],
          dataSource: observableData
        });

        $("#update").click(function(e) {
          observableData[0].set("end", new Date(2013, 5, 13, 13));
        });
      });
    </script>

See Also

Other articles and how-to examples on the Kendo UI Scheduler:

• Scheduler JavaScript API Reference
• How to Create Recurrence Editor Using Mobile Editor
• How to Set Event Color in the Template
• How to Show More Events in View Cells
• How to Show Only All-Day Events
• How to Show Tooltip with Additional Information over Scheduler Events
• How to Use Different Date Formats
• How to Use Remote Validation
• How to Work with Scheduler Offline

How-to examples on the Kendo UI Scheduler in AngularJS:

• How to Edit Using ContextMenu
• How to Set Initial Data Manually
• How to Wrap Scheduler in Custom Directives

For more runnable examples on the Kendo UI Scheduler, browse its How To documentation folder.