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
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Untitled</title>
-
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
-
- <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
- <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
- <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
- <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
- </head>
- <body>
- <div class="container">
- <div class="row">
- <div class="col-sm-6">
- <div id="scheduler"></div>
- </div>
- </div>
- </div>
-
- </body>
- </html>
Step 2: Create one JS file and write the following code.
- var d = new Date();
-
- var month = d.getMonth() + 1;
- var day = d.getDate();
-
- var output = d.getFullYear() + '/' +
- (month < 10 ? '0' : '') + month + '/' +
- (day < 10 ? '0' : '') + day;
- $("#scheduler").kendoScheduler({
-
- date: output,
- dataSource: [
-
- {
- id: 1,
- start: output + ' ' + '05:00 AM',
- end: output + ' ' + '06:00 AM',
- title: "Yoga"
- },
-
- {
- id: 2,
- start: output + ' ' + '07:00 AM',
- end: output + ' ' + '08:00 AM',
- title: "Meeting"
- }
- ]
- });
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
- <html>
- <head>
- <meta charset="utf-8">
- <title>Untitled</title>
-
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
-
- <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
- <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
- <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
- <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
- </head>
- <body>
- <div class="container">
- <div class="row">
- <div class="col-sm-6">
- <div id="scheduler"></div>
- </div>
- </div>
- </div>
-
- </body>
- </html>
JavaScript
- var d = new Date();
-
- var month = d.getMonth() + 1;
- var day = d.getDate();
-
- var output = d.getFullYear() + '/' +
- (month < 10 ? '0' : '') + month + '/' +
- (day < 10 ? '0' : '') + day;
- $("#scheduler").kendoScheduler({
- toolbar: ["pdf"],
- pdf: {
- fileName: "SchedulerExport.pdf",
- },
- date: output,
- dataSource: [
-
- {
- id: 1,
- start: output + ' ' + '05:00 AM',
- end: output + ' ' + '06:00 AM',
- title: "Yoga"
- },
-
- {
- id: 2,
- start: output + ' ' + '07:00 AM',
- end: output + ' ' + '08:00 AM',
- title: "Meeting"
- }
- ]
- });
Result In Browser
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!