Kendo Scheduler Suggestions - kendo-ui

Question

I want to show day in shift for example 24 days hours can be divided into 3 shift 8 hours each or can 6 hours each.
Against that i wanted to add events in Kendo Scheduler. Each day must have shift as show in below image
in the image shift marked for each day and noted with different color.
Each shift can or can not have events.
I'm also expecting functionality where events can move across the shifts.

Answer 1

I believe you'll have to implement a custom view to accomplish this. Here is a Telerik page that demonstrates it, and if you click the "Open in Dojo" link in the upper right of the code example you can see it execute (and edit and try it yourself).
Code example for their custom 3-day view from link
<div id="scheduler"></div>
<script>
var CustomAgenda = kendo.ui.AgendaView.extend({
endDate: function() {
var date = kendo.ui.AgendaView.fn.endDate.call(this);
return kendo.date.addDays(date, 31);
}
});
var ThreeDayView = kendo.ui.MultiDayView.extend({
nextDate: function () {
return kendo.date.nextDay(this.startDate());
},
options: {
selectedDateFormat: "{0:D} - {1:D}"
},
name: "ThreeDayView",
calculateDateRange: function () {
// Create a range of dates that will be displayed within the view.
var start = this.options.date,
idx, length,
dates = [];
for (idx = 0, length = 3; idx < length; idx++) {
dates.push(start);
start = kendo.date.nextDay(start);
}
this._render(dates);
}
});
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [
"day",
"week",
// "custom week",
{ type: "ThreeDayView", title: "Three day view", selected: true },
// "custom agenda",
{ type: "CustomAgenda", title: "Custom Agenda" }
],
timezone: "Etc/UTC",
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: "taskId",
fields: {
taskId: { from: "TaskID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
ownerId: { from: "OwnerID", defaultValue: 1 },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
}
});
});
</script>