Different Ways Of Disabling The Dates In Kendo Calendar

Gowtham K
Feb 25, 2016
5.2k
0
0
Article

KendoCalendar.rar

In this article Iwouls like to share one of the major updates of the calendar widget in the recent release of Kendo UI.

Implementing the Kendo Calendar

We can implement the Kendo calendar simply by using the following code.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/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/2016.1.112/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div id="calendar"></div>
<script>
$(document).ready(function()
{
$("#calendar").kendoCalendar
({
});
});
</script>
</body>
</html>

The Kendo Calendar in Browser:

Figure 1

Now by the recent release of the Kendo UI we can disable the week or any particular date of the month in the calendar

Let us see how to disable the week.

Disabling the week in calendar:

To disable the week in the calendar we need to specify the week which should disable in the disableDates array of Kendo calendar as in the following code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/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/2016.1.112/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div id="calendar"></div>
<script>
$(document).ready(function()
{
$("#calendar").kendoCalendar
({
disableDates: ["sa", "tu"]
});
});
</script>
</body>
</html>

The above script is used to disable the Saturdays and Tuesdays in the calendar.

The Calendar in Browser:

Disabling the date in the calendar

We can disable the specific date in the calendar by defining the function for disable dates.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/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/2016.1.112/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div id="calendar"></div>
<script>
$(document).ready(function()
{
$("#calendar").kendoCalendar
({
disableDates: function(date)
{
var disabled = [3, 7, 15, 8];
if (date && disabled.indexOf(date.getDate()) > -1)
{
return true;
} else
{
return false;
}
}
});
});
</script>
</body>
</html>

The Calendar in Browser:

Disabling the specific date with month and year of the calendar

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/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/2016.1.112/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div id="calendar"></div>
<script>
$(document).ready(function()
{
$("#calendar").kendoCalendar
({
dates: [
new Date("1/1/2016"),
new Date("1/19/2016"),
new Date("2/17/2016"),
new Date("2/23/2016"),
new Date("4/16/2016")
],
disableDates: function(date)
{
var dates = $("#calendar").data("kendoCalendar").options.dates;
if (date && compareDates(date, dates))
{
return true;
} else
{
return false;
}
}
});
function compareDates(date, dates)
{
for (var i = 0; i < dates.length; i++)
{
if (dates[i].getDate() == date.getDate() &&
dates[i].getMonth() == date.getMonth() &&
dates[i].getYear() == date.getYear())
{
return true
}
}
}
});
});
</script>
</body>
</html>

The Calendar in Browser:

From the above image you can observe that the dates of the 17th and 23rd of Feb are disabled which is specified in dates array of the script. Something is missing in the style, right? Yes, we need to differentiate the disabled date with other default disabled dates in calendar, so let's do some styling. Include the following style in the html code: