Below is the setup of my scheduler:
$("#template").kendoScheduler({
views: [{
type: "day",
minorTickCount: 12,
majorTick: 60,
showWorkHours: true,
majorTimeHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'HH:mm')#</strong>"),
}],
height: "calc(100vh - 111px)", // 100% of screen height minus the height of the header and footr
snap: true,
date: new Date("2013/6/6 08:00"),
startTime: new Date("2013/6/6 " + this.StartTime),
endTime: new Date("2013/6/6 " + this.EndTime),
workDayStart: new Date("2013/6/6 " + this.StartTime),
workDayEnd: new Date("2013/6/6 " + this.EndTime),
footer: false,
currentTimeMarker: false,
editable: {
template: $("#customEditorTemplate").html(),
},
eventTemplate: $("#eventTemplate").html(),
messages: {
editor: {
editorTitle: "Booking Slot"
}
},
dataBound: function () {
createDropArea(this);
var view = this.view();
var events = this.dataSource.view();
var eventElement;
var event;
for (var idx = 0, length = events.length; idx < length; idx++) {
event = events[idx];
eventElement = view.element.find("[data-uid=" + event.uid + "]");
if (event.Bookable === false) {
eventElement.css("background-color", "#ea4335");
}
else {
eventElement.css("background-color", "#dde2e6");
eventElement.css("color", "black");
}
}
},
resizeEnd: function (e: any) {
if (isAnotherSlotAtSameTime(e.start, e.end, e.event)) {
kendo.alert("You cannot resize a block over the same time as another");
e.preventDefault();
return;
}
},
moveEnd: function (e) {
if (isAnotherSlotAtSameTime(e.start, e.end, e.event)) {
kendo.alert("You cannot move a block to the same time as another");
e.preventDefault();
return;
}
},
add: function (e) {
if (isAnotherSlotAtSameTime(e.event.start, e.event.end, e.event)) {
kendo.alert("You cannot add a slot at the same time as another");
e.preventDefault();
return;
}
},
remove: function (e) {
new UnsavedChanges().kendoControlChanged()
},
save: function (e) {
if (isAnotherSlotAtSameTime(e.event.start, e.event.end, e.event)) {
kendo.alert("There is already a slot at this time");
e.preventDefault();
return;
}
var startAt = new Date("2013/6/6 " + $("#iptStartTime").val());
var endAt = new Date("2013/6/6 " + $("#iptEndTime").val());
if (e.event.start < startAt) {
kendo.alert("You cannot set the start time of this slot to before the template start time");
e.preventDefault();
return;
}
if (e.event.end > endAt) {
kendo.alert("You cannot set the end time of this slot to after the template end time");
e.preventDefault();
return;
}
let data = dsBlockTypesList.data();
for (var i = 0, n = data.length; i < n; i++) {
if ((data[i] as any).id == (e.event as any).BlockTypeId) {
(e.event as any).slotDuration = (data[i] as any).slotDuration;
(e.event as any).Bookable = (data[i] as any).bookable;
(e.event as any).title = (data[i] as any).name;
}
}
DataModification.SetDescription(e.event.start, e.event.end, e.event);
if (e.container != null) {
updated.push(e.event.id);
}
new UnsavedChanges().kendoControlChanged()
},
edit: function (e) {
var blockTypeList = e.container.find("#blockTypeList");
blockTypeList.kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
dataSource: dsBlockTypesList
});
},
dataSource:
{
batch: true,
transport: {
read: function (options: any) {
remoteDs.one("change", function () {
options.success(this.data());
});
remoteDs.read();
},
update: function (options: any) {
options.data.models.forEach(function (element: { Id: any; }) {
updated.push(element.Id);
});
options.success(true);
},
destroy: function (options: any) {
options.success(true);
},
create: function (options: any) {
var event = options.data.models[0];
event.local = true;
options.success(event);
}
},
schema: {
model: {
id: "Id",
fields: {
title: { from: "title", validation: { required: true } },
description: { from: "description", defaultValue: "" },
start: { type: "date", from: "start" },
end: { type: "date", from: "end" },
local: { type: "bool", defaultValue: "false" },
BlockTypeId: {
type: "number",
},
templateId: {
type: "number",
},
bookable: {
type: "bool",
},
slotDuration: {
type: "number",
},
}
}
}
}
}).data("kendoScheduler");