New to Kendo UI for jQuery? Start a free 30-day trial

DataSource

configuration

The data source of the widget which contains the scheduler events. Can be a JavaScript object which represents a valid data source configuration, a JavaScript array or an existing kendo.data.SchedulerDataSource instance.

If the dataSource option is set to a JavaScript object or array the widget will initialize a new kendo.data.SchedulerDataSource instance using that value as data source configuration.

If the dataSource option is an existing kendo.data.SchedulerDataSource instance the widget will use that instance and will not initialize a new one.

The Kendo UI Scheduler widget can be bound only to a kendo.data.SchedulerDataSource. An exception will be thrown if the dataSource option is set to a kendo.data.DataSource instance.

dataSource

Object|Array|kendo.data.SchedulerDataSource

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2022/6/6"),
  dataSource: {
    batch: true,
    transport: {
        read: {
            url: "https://demos.telerik.com/service/v2/core/tasks"
        },
        update: {
            url: "https://demos.telerik.com/service/v2/core/tasks/update",
            type: "POST",
            contentType: "application/json"
        },
        create: {
            url: "https://demos.telerik.com/service/v2/core/tasks/create",
            type: "POST",
            contentType: "application/json"
        },
        destroy: {
            url: "https://demos.telerik.com/service/v2/core/tasks/destroy",
            type: "POST",
            contentType: "application/json"
        },
        parameterMap: function (options, operation) {
            if (operation !== "read" && options.models) {
                return kendo.stringify(options.models);
            }
        }
    },
    schema: {
       model: {
         id: "ID",
         fields: {
           ID: { type: "number" },
           title: { field: "Title", defaultValue: "No title", validation: { required: true } },
           start: { type: "date", field: "Start" },
           end: { type: "date", field: "End" },
           description: { field: "Description" },
           recurrenceId: { from: "RecurrenceID" },
           recurrenceRule: { from: "RecurrenceRule" },
           recurrenceException: { from: "RecurrenceException" },
           ownerId: { field: "OwnerID", defaultValue: 1 },
           isAllDay: { type: "boolean", field: "IsAllDay" }
         }
       }
     }
  }
});
</script>

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    },
    {
      id: 2,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Meeting"
    }
  ]
});
</script>

<div id="scheduler"></div>
<script>
var dataSource = new kendo.data.SchedulerDataSource({
  transport: {
    read: {
      url: "https://demos.telerik.com/service/v2/core/tasks"
    }
  },
  schema: {
   model: {
     id: "ID",
     fields: {
       ID: { type: "number" },
       title: { field: "Title", defaultValue: "No title", validation: { required: true } },
       start: { type: "date", field: "Start" },
       end: { type: "date", field: "End" },
       description: { field: "Description" },
       recurrenceId: { from: "RecurrenceID" },
       recurrenceRule: { from: "RecurrenceRule" },
       recurrenceException: { from: "RecurrenceException" },
       ownerId: { field: "OwnerID", defaultValue: 1 },
       isAllDay: { type: "boolean", field: "IsAllDay" }
     }
   }
 }
});
$("#scheduler").kendoScheduler({
  date: new Date("2022/6/6"),
  dataSource: dataSource
});
</script>