Post
Ask Question

Working With Scheduler Widget In Kendo UI

Introduction

The Kendo Scheduler widget is used to display the set of events. It has many functionalities like viewing the event by single day or week, else the whole month.

Working with Scheduler in Kendo UI 

Now we are going to create a Kendo Scheduler through the following steps.

Step 1: Create an HTML page, In my case I named it KendoScheduler.html.

Write the following design in KendoScheduler.html

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Untitled</title>  
  6.   
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">  
  11.   
  12.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>  
  15.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>  
  16. </head>  
  17. <body>  
  18.     <div class="container">  
  19.         <div class="row">  
  20.             <div class="col-sm-6">  
  21.                 <div id="scheduler"></div>  
  22.             </div>  
  23.         </div>  
  24.     </div>  
  25.      
  26. </body>  
  27. </html>  
Step 2: Create one JS file and write the following code.
  1.         var d = new Date();  
  2.   
  3.         var month = d.getMonth() + 1;  
  4.         var day = d.getDate();  
  5.   
  6.         var output = d.getFullYear() + '/' +  
  7.             (month < 10 ? '0' : '') + month + '/' +  
  8.             (day < 10 ? '0' : '') + day;  
  9.         $("#scheduler").kendoScheduler({  
  10.   
  11.   date:  output,   
  12.   dataSource: [   
  13.      
  14.     {  
  15.       id: 1,    
  16.       start: output + ' ' + '05:00 AM',  
  17.       end: output + ' ' + '06:00 AM',  
  18.       title: "Yoga"   
  19.     },  
  20.     
  21.     {  
  22.       id: 2,  
  23.       start: output + ' ' + '07:00 AM',  
  24.       end: output + ' ' + '08:00 AM',  
  25.       title: "Meeting"  
  26.     }  
  27.   ]  
  28. });  

From the above script you can observe that I am getting current date into the date parameter of the KendScheeduler.

DataSource

Where the kendo.data.SchedulerDataSource configuration takes place.

In DataSource we have,

  • ID -> It is the unique identifier need for editing purpose,
  • Start -> In this we need to define the start time of the event.
  • End -> In this we need to define the End time of the Event.
  • Title->In this we need to define the title of the event.  
Result in Browser
 
 
                                                                              Figure 1 

Export the Event to PDF

This is  one of the awesome feature in the Kendo Scheduler where we can export the event to PDF just by adding toolbar and pdf property in script

Write the following design in KendoScheduler.html 

  1. <html>  
  2. <head>  
  3.     <meta charset="utf-8">  
  4.     <title>Untitled</title>  
  5.   
  6.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">  
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">  
  10.   
  11.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  12.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>  
  15. </head>  
  16. <body>  
  17.     <div class="container">  
  18.         <div class="row">  
  19.             <div class="col-sm-6">  
  20.                 <div id="scheduler"></div>  
  21.             </div>  
  22.         </div>  
  23.     </div>  
  24.      
  25. </body>  
  26. </html>  
JavaScript
  1.         var d = new Date();  
  2.   
  3.         var month = d.getMonth() + 1;  
  4.         var day = d.getDate();  
  5.   
  6.         var output = d.getFullYear() + '/' +  
  7.             (month < 10 ? '0' : '') + month + '/' +  
  8.             (day < 10 ? '0' : '') + day;  
  9.         $("#scheduler").kendoScheduler({  
  10.             toolbar: ["pdf"],  
  11.            pdf: {  
  12.             fileName: "SchedulerExport.pdf",  
  13.                  },  
  14.      date:  output,   
  15.   dataSource: [   
  16.      
  17.     {  
  18.       id: 1,    
  19.       start: output + ' ' + '05:00 AM',  
  20.       end: output + ' ' + '06:00 AM',  
  21.       title: "Yoga"   
  22.     },  
  23.     
  24.     {  
  25.       id: 2,  
  26.       start: output + ' ' + '07:00 AM',  
  27.       end: output + ' ' + '08:00 AM',  
  28.       title: "Meeting"  
  29.     }  
  30.   ]  
  31. });  
Result In Browser

daywork
                                                                         Figure 2


                                                                                 Figure 3 

Conclusion

From this article we came across how to work with scheduler in the Kendo UI and how to export the event in the Kendo Scheduler as a pdf.

I hope you enjoyed this article. Thank you! 


Similar Articles