Contribute
JQuery

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:

  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">    
  6.                         
  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 }"  
  6.                          
  7.              style="height: 600px" data-selectable="true">  
  8.                     
  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.             },  
  19.   
  20.             parameterMap: function(options, operation)   
  21.           {  
  22.                 if (operation !== "read" && options.models)  
  23.                 {  
  24.                     return   
  25.                     {  
  26.                         models: kendo.stringify(options.models)  
  27.                     };  
  28.                 }  
  29.   
  30.             },  
  31.         },  
  32.   
  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}"  
  6.                               
  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.                 },  
  17.                
  18.              parameterMap: function (options, operation) 
  19.                   {      
  20.                  if (operation !== "read" && options.models) {      
  21.                      return
  22.                      {      
  23.                          models: kendo.stringify(options.models)      
  24.                      };      
  25.                  }      
  26.                 
  27.          },      
  28.             },      
  29.               
  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);  
Result in Browser
 
 

Resize Event:

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

 HTML Design:

  1. <div id="example">
  2. <div data-role="scheduler"  
  3.         data-bind="source: tasks,  
  4.         visible: isVisible,  
  5.         events:{ resize: scheduler_resize}"  
  6.                    
  7.         style="height: 600px" data-selectable="true">  
  8.         </div>
  9.   
  10.   </div>  
 JavaScript: 
  1. var viewModel = kendo.observable({  
  2.         isVisible: true,  
  3.         scheduler_resize:function(e)  
  4.         {  
  5.             e.preventDefault();  
  6.             alert("Resize events")  
  7.         },  
  8.         tasks: new kendo.data.SchedulerDataSource({  
  9.             batch: true,  
  10.             transport: {  
  11.                 read: {  
  12.                     url: "api/Events",  
  13.                     dataType: "json"  
  14.                 },  
  15.           
  16.              parameterMap: function (options, operation) {      
  17.                  if (operation !== "read" && options.models) {      
  18.                      return {      
  19.                          models: kendo.stringify(options.models)      
  20.                      };      
  21.                  }      
  22.                 
  23.          },      
  24.             },      
  25.               
  26.             schema: {  
  27.                 model: {  
  28.                     id: "taskId",  
  29.                     fields: {  
  30.                         taskId: { from: "TaskID", type: "number" },  
  31.                         title: { from: "Title", defaultValue: "No title", validation: { required: true } },  
  32.                         start: { type: "date", from: "Start" },  
  33.                         end: { type: "date", from: "EndDate" },  
  34.                         startTimezone: { from: "StartTimezone" },  
  35.                         endTimezone: { from: "EndTimezone" },  
  36.                         description: { from: "Description" },  
  37.                         recurrenceId: { from: "RecurrenceID" },  
  38.                         recurrenceRule: { from: "RecurrenceRule" },  
  39.                         recurrenceException: { from: "RecurrenceException" },  
  40.                         isAllDay: { type: "boolean", from: "IsAllDay" }  
  41.                     }  
  42.                 }  
  43.             }  
  44.         })  
  45.     });  
  46.     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:
 
  1. <div id="example">
  2. <div data-role="scheduler" 
  3.                    data-bind="source: tasks,  
  4.                           visible: isVisible,  
  5.                    events:{ change: scheduler_change,}"  
  6.                             
  7.                    style="height: 600px" data-selectable="true">  
  8.                  </div>   
  9.   
  10.               </div>  
 JavaScript: 
  1. var viewModel = kendo.observable({  
  2.         isVisible: true,  
  3.         scheduler_change:function(e)  
  4.         {  
  5.             var start = e.start;   
  6.             var end = e.end;   
  7.             var slots = e.slots;   
  8.             var events = e.events;   
  9.   
  10.             var message = "change:: selection from {0:g} till {1:g}";  
  11.   
  12.             if (events.length) {  
  13.                 message += ". The selected event is '" + events[events.length - 1].title + "'";  
  14.             }  
  15.   
  16.             alert(kendo.format(message, start, end));  
  17.         },  
  18.         tasks: new kendo.data.SchedulerDataSource({  
  19.             batch: true,  
  20.             transport: {  
  21.                 read: {  
  22.                     url: "api/Events",  
  23.                     dataType: "json"  
  24.                 },  
  25.                        
  26.              parameterMap: function (options, operation) {      
  27.                  if (operation !== "read" && options.models) {      
  28.                      return {      
  29.                          models: kendo.stringify(options.models)      
  30.                      };      
  31.                  }      
  32.                 
  33.          },      
  34.             },      
  35.               
  36.             schema: {  
  37.                 model: {  
  38.                     id: "taskId",  
  39.                     fields: {  
  40.                         taskId: { from: "TaskID", type: "number" },  
  41.                         title: { from: "Title", defaultValue: "No title", validation: { required: true } },  
  42.                         start: { type: "date", from: "Start" },  
  43.                         end: { type: "date", from: "EndDate" },  
  44.                         startTimezone: { from: "StartTimezone" },  
  45.                         endTimezone: { from: "EndTimezone" },  
  46.                         description: { from: "Description" },  
  47.                         recurrenceId: { from: "RecurrenceID" },  
  48.                         recurrenceRule: { from: "RecurrenceRule" },  
  49.                         recurrenceException: { from: "RecurrenceException" },  
  50.                         isAllDay: { type: "boolean", from: "IsAllDay" }  
  51.                     }  
  52.                 }  
  53.             }  
  54.         })  
  55.     });  
  56.     kendo.bind($("#example"), viewModel);  
 Result in Browser:
 
 
 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs