Post
Ask Question

Different Ways Of Disabling The Dates In Kendo Calendar

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. 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Untitled</title>  
  7.   
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">  
  11.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css">  
  12.   
  13.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>  
  15.     <script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>  
  16.     <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>  
  17. </head>  
  18.   
  19. <body>  
  20.     <div id="calendar"></div>  
  21.     <script>  
  22.         $(document).ready(function()   
  23.         {  
  24.   
  25.             $("#calendar").kendoCalendar  
  26.             ({  
  27.   
  28.             });  
  29.         });  
  30.     </script>  
  31. </body>  
  32.   
  33. </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:
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Untitled</title>  
  7.   
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">  
  11.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css">  
  12.   
  13.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>  
  15.     <script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>  
  16.     <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>  
  17. </head>  
  18.   
  19. <body>  
  20.     <div id="calendar"></div>  
  21.     <script>  
  22.         $(document).ready(function()  
  23.         {  
  24.             $("#calendar").kendoCalendar  
  25.             ({  
  26.   
  27.                 disableDates: ["sa", "tu"]  
  28.             });  
  29.         });  
  30.     </script>  
  31. </body>  
  32.   
  33. </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. 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Untitled</title>  
  7.   
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">  
  11.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css">  
  12.   
  13.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>  
  15.     <script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>  
  16.     <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>  
  17. </head>  
  18.   
  19. <body>  
  20.     <div id="calendar"></div>  
  21.     <script>  
  22.         $(document).ready(function()  
  23.         {  
  24.             $("#calendar").kendoCalendar  
  25.             ({  
  26.   
  27.                 disableDates: function(date)  
  28.                 {  
  29.                     var disabled = [3, 7, 15, 8];  
  30.                     if (date && disabled.indexOf(date.getDate()) > -1)  
  31.                     {  
  32.                         return true;  
  33.                     } else   
  34.                     {  
  35.                         return false;  
  36.                     }  
  37.   
  38.                 }  
  39.   
  40.   
  41.             });  
  42.         });  
  43.     </script>  
  44. </body>  
  45.   
  46. </html>   
The Calendar in Browser:
 
 
Disabling the specific date with month and year of the calendar 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Untitled</title>  
  7.   
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">  
  11.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css">  
  12.   
  13.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>  
  15.     <script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>  
  16.     <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>  
  17. </head>  
  18.   
  19. <body>  
  20.     <div id="calendar"></div>  
  21.     <script>  
  22.         $(document).ready(function()  
  23.         {  
  24.         $("#calendar").kendoCalendar  
  25.         ({  
  26.             dates: [  
  27.                 new Date("1/1/2016"),  
  28.                 new Date("1/19/2016"),  
  29.                 new Date("2/17/2016"),  
  30.                 new Date("2/23/2016"),  
  31.                 new Date("4/16/2016")  
  32.   
  33.             ],  
  34.             disableDates: function(date)  
  35.             {  
  36.                 var dates = $("#calendar").data("kendoCalendar").options.dates;  
  37.                 if (date && compareDates(date, dates))   
  38.                 {  
  39.                     return true;  
  40.                 } else  
  41.                 {  
  42.                     return false;  
  43.                 }  
  44.             }  
  45.         });  
  46.   
  47.         function compareDates(date, dates)  
  48.         {  
  49.             for (var i = 0; i < dates.length; i++)   
  50.                 {  
  51.                 if (dates[i].getDate() == date.getDate() &&  
  52.                     dates[i].getMonth() == date.getMonth() &&  
  53.                     dates[i].getYear() == date.getYear())  
  54.                 {  
  55.                     return true  
  56.                 }  
  57.             }  
  58.         }  
  59.         });  
  60.         });  
  61.     </script>  
  62. </body>  
  63.   
  64. </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: 
  1.  <style>    
  2. .k-state-disabled a.k-link 
    {    
  3. text-decoration: line-through;    
  4. }    
  5. </style>   
The Calendar in Browser :
 
I hope you enjoyed this article. Your valuable feedback, question, or comments about this article are always welcomed.
 
Read more articles on JQuery:


Similar Articles