dataSource Object|Array|kendo.data.SchedulerDataSource
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 thedataSource
option is set to akendo.data.DataSource
instance.
Example - set dataSource as a JavaScript object
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
date: new Date("2022/6/6"),
dataSource: {
batch: true,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/tasks",
dataType: "jsonp"
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/tasks/update",
dataType: "jsonp"
},
create: {
url: "https://demos.telerik.com/kendo-ui/service/tasks/create",
dataType: "jsonp"
},
destroy: {
url: "https://demos.telerik.com/kendo-ui/service/tasks/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: 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>
Example - set dataSource as a JavaScript array
<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>
Example - set dataSource as an existing kendo.data.SchedulerDataSource instance
<div id="scheduler"></div>
<script>
var dataSource = new kendo.data.SchedulerDataSource({
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/tasks",
dataType: "jsonp"
}
},
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>