or
<div id="scheduler" style="height:500px"></div>$("#scheduler").kendoScheduler({ editable: { confirmation: false }, resources: ko.observable([ { field: "displayMode", dataSource: [ { text: "Regular-Other-Future", value: 111, color: "#93D095" }, ... ] } ]), add: function (e) { e.preventDefault(); // Custom adding implementation }, edit: function (e) { e.preventDefault(); // Custom editing implementation }, remove: function (e) { e.preventDefault(); // Custom removing implementation }, moveStart: function (e) { e.preventDefault(); // Prevent drag-and-drop }, move: function (e) { e.preventDefault(); // Prevent drag-and-drop }, moveEnd: function (e) { e.preventDefault(); // Prevent drag-and-drop }, views: [{ type: "day", showWorkHours: true }, { type: "week", showWorkHours: true, selected: true }, "month", "agenda"], timezone: "Etc/UTC", date: new Date(), dataSource: self.dataSource // self.dataSource is KO observable, which is assigned later with kendo.data.SchedulerDataSource()});data-page-sizes="[15,30,60]"data-page-sizes="myPageSizes"