Kendo UI datepicker - month change event

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.

score 3 · Answer 1 · answered Apr 07 '17 at 15:43

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

I don't think that is a good idea to call an internal method(`_calendar()`) at all. We should avoid that practice. — DontVoteMeDown, Apr 07 '17 at 17:46
I agree, but it appears to be the only way to access the Calendar and it's pretty safe that there will always be some method kendo uses to initialize the Calendar that can be used. — The Dread Pirate Stephen, Apr 07 '17 at 22:23

score 0 · Accepted Answer · answered Apr 07 '17 at 17:43

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

Kendo UI datepicker - month change event

2 Answers2