Events In Kendo Scheduler

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:

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

Result in Browser:

Events In Kendo Scheduler

DataBinding:

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

1. <div id="example">
2. <div data-role="scheduler"
3. data-bind="source: tasks,
4. visible: isVisible,
5. events:{ dataBinding: scheduler_dataBinding }"
7. style="height: 600px" data-selectable="true">
9. </div>
10. </div>

JavaScript:

1. var viewModel = kendo.observable(
2. {
3. isVisible: true,
4. scheduler_dataBound: function(e)
5. {
6. e.preventDefault();
7. alert("dataBound");
8. },
9. tasks: new kendo.data.SchedulerDataSource(
10. {
11. batch: true,
12. transport:
13. {
14. read:
15. {
16. url: "api/Events",
17. dataType: "json"
18. },
20. parameterMap: function(options, operation)
21. {
22. if (operation !== "read" && options.models)
23. {
24. return
25. {
26. models: kendo.stringify(options.models)
27. };
28. }
30. },
31. },
33. schema:
34. {
35. model:
36. {
37. id: "taskId",
38. fields:
39. {
40. taskId:
41. {
42. from: "TaskID",
43. type: "number"
44. },
45. title:
46. {
47. from: "Title",
48. defaultValue: "No title",
49. validation:
50. {
51. required: true
52. }
53. },
54. start:
55. {
56. type: "date",
57. from: "Start"
58. },
59. end:
60. {
61. type: "date",
62. from: "EndDate"
63. },
64. startTimezone:
65. {
66. from: "StartTimezone"
67. },
68. endTimezone:
69. {
70. from: "EndTimezone"
71. },
72. description:
73. {
74. from: "Description"
75. },
76. recurrenceId:
77. {
78. from: "RecurrenceID"
79. },
80. recurrenceRule:
81. {
82. from: "RecurrenceRule"
83. },
84. recurrenceException:
85. {
86. from: "RecurrenceException"
87. },
88. isAllDay:
89. {
90. type: "boolean",
91. from: "IsAllDay"
92. }
93. }
94. }
95. }
96. })
97. });
98. kendo.bind($("#example"), viewModel);

Result in Browser:

DataBound:

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

1. <div id="example">
2. <div data-role="scheduler"
3. data-bind="source: tasks,
4. visible: isVisible,
5. events:{ dataBound: scheduler_dataBound}"
7. style="height: 600px" data-selectable="true">
8. </div>
9. </div>

JavaScript:

1. var viewModel = kendo.observable({
2. isVisible: true,
3. scheduler_dataBound:function(e)
4. {
5. e.preventDefault();
6. alert("dataBound");
7. },
8. tasks: new kendo.data.SchedulerDataSource({
9. batch: true,
10. transport:
11. {
12. read:
13. {
14. url: "api/Events",
15. dataType: "json"
16. },
18. parameterMap: function (options, operation)
19. {
20. if (operation !== "read" && options.models) {
21. return
22. {
23. models: kendo.stringify(options.models)
24. };
25. }
27. },
28. },
30. schema: {
31. model: {
32. id: "taskId",
33. fields: {
34. taskId: { from: "TaskID", type: "number" },
35. title: { from: "Title", defaultValue: "No title", validation: { required: true } },
36. start: { type: "date", from: "Start" },
37. end: { type: "date", from: "EndDate" },
38. startTimezone: { from: "StartTimezone" },
39. endTimezone: { from: "EndTimezone" },
40. description: { from: "Description" },
41. recurrenceId: { from: "RecurrenceID" },
42. recurrenceRule: { from: "RecurrenceRule" },
43. recurrenceException: { from: "RecurrenceException" },
44. isAllDay: { type: "boolean", from: "IsAllDay" }
45. }
46. }
47. }
48. })
49. });
50. kendo.bind($("#example"), viewModel);

Resize Event:

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

HTML Design:

Change Event:

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