<!DOCTYPE html> <html> <head> <title></title> <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css" rel="stylesheet" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script> </head> <body> <div id="example" class="k-content"> <div class="configuration"> <span class="infoHead">Information</span> <p> Apply special style for the birthdays. </p> </div> <table class="demo-section"> <tr> <td> <input id="datetimepickerBegin" /> </td> <td> <input id="datetimepickerEnd" /> </td> </tr> </table> <script> function isInArray(date, dates) { for(var idx = 0, length = dates.length; idx < length; idx++) { var d = dates[idx]; if (date.getFullYear() == d.getFullYear() && date.getMonth() == d.getMonth() && date.getDate() == d.getDate()) { return true; } } return false; } $(document).ready(function() { var today = new Date(), birthdays = [ new Date(today.getFullYear(), today.getMonth(), 11, 10, 0, 0), new Date(today.getFullYear(), today.getMonth(), 11, 10, 30, 0), new Date(today.getFullYear(), today.getMonth(), 11, 14, 0, 0), new Date(today.getFullYear(), today.getMonth() + 1, 6, 20, 0, 0), new Date(today.getFullYear(), today.getMonth() + 1, 27, 8, 0, 0), new Date(today.getFullYear(), today.getMonth() + 1, 27, 18, 0, 0), new Date(today.getFullYear(), today.getMonth() - 1, 3, 12, 0, 0), new Date(today.getFullYear(), today.getMonth() - 2, 22, 16, 30, 0) ]; $("#datetimepickerBegin").kendoDateTimePicker({ format: "yyyy-MM-dd hh:mm:ss", parseFormats: ["yyyy-MM-dd", "hh:mm:ss"], value: today, dates: birthdays, month: { // template for dates in month view content: '# if (isInArray(data.date, data.dates)) { #' + '<div class="birthday"></div>' + '# } #' + '#= data.value #' }, footer: "Today - #=kendo.toString(data, 'd') #" }); $("#datetimepickerBegin").data("kendoDateTimePicker") .dateView.calendar.element .width(300); $("#datetimepickerEnd").kendoDateTimePicker({ format: "yyyy-MM-dd hh:mm:ss", parseFormats: ["yyyy-MM-dd", "hh:mm:ss"], value: today, dates: birthdays, month: { // template for dates in month view content: '# if (isInArray(data.date, data.dates)) { #' + '<div class="birthday"></div>' + '# } #' + '#= data.value #' }, footer: "Today - #=kendo.toString(data, 'd') #" }); $("#datetimepickerEnd").data("kendoDateTimePicker") .dateView.calendar.element .width(300); }); </script> <style scoped> .demo-section { margin-right: 375px; width: 185px; } .birthday { background: transparent url(../../content/web/calendar/cake.png) no-repeat 0 50%; display: inline-block; width: 16px; height: 16px; vertical-align: middle; margin-right: 3px; } </style> </div> </body> </html>