Kendo UI datepicker - month change event - kendo-ui

Question

Kendo UI datepicker - month change event
I searched for this here & on Telerik forum too but don't have the solution for this.
Here, I want to mark few dates from month and I did it on OPEN event like below-
$.each(dates, function (index, date) {
var reformattedDate = date.getFullYear() + '/' + date.getMonth() + '/' + date.getDate();
$('#datepickerId_dateview a.k-link[data-value="' + reformattedDate + '"]').parent().addClass("date-marking-class");
});
So, I am looping though all my dates and comparing it with data-value of datepicker calendar. On match found, I am applying class to mark that date.
It's working absolutely fine on datepicker OPEN event but whenever I change month, it's not marking the date at all.
So i want an event which will trigger on month change, so that I can execute that 2 lines of code to mark the dates on new month.

Answer 1

There does not appear to be anything documented to do this, but after looking at the DatePicker source code you can accomplish it.
The underlying Calendar widget has a navigate event that does what you want(http://docs.telerik.com/kendo-ui/api/javascript/ui/calendar#events-navigate). The problem is getting a reference to the Calendar used by the DatePicker.
I was able to do it like this:
$(document).ready(function() {
// create DatePicker from input HTML element
var datePicker = $("#datepicker").kendoDatePicker().getKendoDatePicker();
var dateView = datePicker.dateView;
// Force calendar to initialize so we can bind to its events...otherwise, it does not exist until it is opened for the first time.
dateView._calendar();
var calendar = dateView.calendar;
calendar.bind("navigate", function () {
console.log("Do your thing here");
});
});
The DatePicker has a DateView which has a Calendar...but the Calendar doesn't exist until the DateView is opened for the first time. But once that happens, you can attach to its navigate event.
I force the Calendar to exist without an open event by calling the "private" _calendar() method that the DateView internally calls on first open...and now you can handle its navigate.
Demo: http://dojo.telerik.com/#Stephen/ekUwE

Answer 2

You can use the month template of the widget:
$("#date").kendoDatePicker({
month: {
content: $("#date-template").html()
}
});
It renders a template for each day if the widget is set to Month view. There you can wrap the day number with a span with the desired class.
And the template could be something like:
#
var month = data.date.getMonth() + 1;
dates = months[month],
found = false,
result = data.value;
if (dates && dates.length > 0) {
for (var i = 0, len = dates.length; i < len; i++) {
var date = dates[i],
dateSplit = data.dateString.split("/");
if (date.getDate() == dateSplit[2] &&
date.getMonth() == dateSplit[1] &&
date.getFullYear() == dateSplit[0])
{
result = "<span class='date-marking-class'>" + data.value + "</span>";
break;
}
}
}
#
#=result#
Being months an object like this:
// All months are contains an array with date objects(in this case, days 10 and 20 for each one)
var months = {
"1": [new Date(2017, 0, 10), new Date(2017, 0, 20)],
"2": [new Date(2017, 1, 10), new Date(2017, 1, 20)],
"3": [new Date(2017, 2, 10), new Date(2017, 2, 20)],
"4": [new Date(2017, 3, 10), new Date(2017, 3, 20)],
"5": [new Date(2017, 4, 10), new Date(2017, 4, 20)],
"6": [new Date(2017, 5, 10), new Date(2017, 5, 20)],
"7": [new Date(2017, 6, 10), new Date(2017, 6, 20)],
"8": [new Date(2017, 7, 10), new Date(2017, 7, 20)],
"9": [new Date(2017, 8, 10), new Date(2017, 8, 20)],
"10": [new Date(2017, 9, 10), new Date(2017, 9, 20)],
"11": [new Date(2017, 10, 10), new Date(2017, 10, 20)],
"12": [new Date(2017, 11, 10), new Date(2017, 11, 20)]
};
Or anyway you want it - that was just a suggestion - since you change the line dates = months[month] to something that gives you an array of dates.
Demo