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

<!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!

9 Comments

Join the conversation! Your thoughts help the community grow.

sachin datey10y ago
Thanks sir,, It helped me a lot
- Gowtham K10y ago
  I'm glad that my article helps you, welcome sachin datey
Arul R11y ago
Nice share!!!
Sibeesh Venu11y ago
Nice Share
Mukesh Kumar11y ago
Good Job Sir
Nilesh Jadav11y ago
Good Share sir !
- Gowtham K11y ago
  Thank You Nilesh
Harshad Pansuriya11y ago
Nice one
- Gowtham K11y ago
  Thank You Harshad