Working With Scheduler Widget In Kendo UI

Gowtham K
9y
5.8k
0
1

Article

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!

Up Next

Ebook Download

View all

Printing in C# Made Easy

Read by 10.8k people

Download Now!

Learn

View all