Events In Kendo Scheduler

Introduction:

In my previous article, I discussed about Remote binding in Kendo Scheduler. In this article let us start playing with Kendo Scheduler Event.

I will use the following REST service to explain how to perform event handling in the Kendo Scheduler.

REST service end point: Api/Events created in my previous article.

The Api/Events service response in POSTMAN as in the following figure:

Views in Kendo Scheduler

The kendo Scheduler have different views like Day view, week view, month view, agenda view and timeline view which can be implement using data-view property as in the following code:

<div data-role="scheduler"
data-views="['day','week','month','agenda','timeline']"
data-bind="source: tasks,
visible: isVisible,
style="height: 600px" data-selectable="true">
</div>

Result in Browser:

Events In Kendo Scheduler

DataBinding:

This event is fired when the widget binds to its data source

<div id="example">
<div data-role="scheduler"
data-bind="source: tasks,
visible: isVisible,
events:{ dataBinding: scheduler_dataBinding }"
style="height: 600px" data-selectable="true">
</div>
</div>

JavaScript:

var viewModel = kendo.observable(
{
isVisible: true,
scheduler_dataBound: function(e)
{
e.preventDefault();
alert("dataBound");
},
tasks: new kendo.data.SchedulerDataSource(
{
batch: true,
transport:
{
read:
{
url: "api/Events",
dataType: "json"
},
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: "EndDate"
},
startTimezone:
{
from: "StartTimezone"
},
endTimezone:
{
from: "EndTimezone"
},
description:
{
from: "Description"
},
recurrenceId:
{
from: "RecurrenceID"
},
recurrenceRule:
{
from: "RecurrenceRule"
},
recurrenceException:
{
from: "RecurrenceException"
},
isAllDay:
{
type: "boolean",
from: "IsAllDay"
}
}
}
}
})
});
kendo.bind($("#example"), viewModel);

Result in Browser:

DataBound:

This event is fired when the kendo scheduler is bound to data from its dataSource

<div id="example">
<div data-role="scheduler"
data-bind="source: tasks,
visible: isVisible,
events:{ dataBound: scheduler_dataBound}"
style="height: 600px" data-selectable="true">
</div>
</div>

JavaScript:

var viewModel = kendo.observable({
isVisible: true,
scheduler_dataBound:function(e)
{
e.preventDefault();
alert("dataBound");
},
tasks: new kendo.data.SchedulerDataSource({
batch: true,
transport:
{
read:
{
url: "api/Events",
dataType: "json"
},
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: "EndDate" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
})
});
kendo.bind($("#example"), viewModel);

Result in Browser

Resize Event:

This Event in kendo Scheduler is fired when the user is resizing an event.

HTML Design:

<div id="example">
<div data-role="scheduler"
data-bind="source: tasks,
visible: isVisible,
events:{ resize: scheduler_resize}"
style="height: 600px" data-selectable="true">
</div>
</div>

JavaScript:

var viewModel = kendo.observable({
isVisible: true,
scheduler_resize:function(e)
{
e.preventDefault();
alert("Resize events")
},
tasks: new kendo.data.SchedulerDataSource({
batch: true,
transport: {
read: {
url: "api/Events",
dataType: "json"
},
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: "EndDate" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
})
});
kendo.bind($("#example"), viewModel);

Result in Browser:

Change Event:

This event in Kendo scheduler is fired when the user selects a cell or event in the scheduler

Note: The data-selectable property should be true to enable this event.

HTML Design:

<div id="example">
<div data-role="scheduler"
data-bind="source: tasks,
visible: isVisible,
events:{ change: scheduler_change,}"
style="height: 600px" data-selectable="true">
</div>
</div>

JavaScript:

var viewModel = kendo.observable({
isVisible: true,
scheduler_change:function(e)
{
var start = e.start;
var end = e.end;
var slots = e.slots;
var events = e.events;
var message = "change:: selection from {0:g} till {1:g}";
if (events.length) {
message += ". The selected event is '" + events[events.length - 1].title + "'";
}
alert(kendo.format(message, start, end));
},
tasks: new kendo.data.SchedulerDataSource({
batch: true,
transport: {
read: {
url: "api/Events",
dataType: "json"
},
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: "EndDate" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
})
});
kendo.bind($("#example"), viewModel);

Result in Browser:

References