JQuery

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! 

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