How to highlight week in kendo datepicker on mouseover

Question

I want highlight the week on mouse hover in kendo datepicker and on select of any date in that week i want to get week start date and end date. I am not getting any idea how to do it. Can anyone one help me Pl.

Thanks in advance

Answer 1

After having done just done this myself, I'll leave traces here for future readers.

The first thing to do is to have the selection look like it's picking a week instead of a day. To achieve that, use a bit of CSS :

.k-calendar table.k-content tr:hover td { background-color: #E3F2FD; }
.k-calendar table.k-content tr td.k-state-selected,
.k-calendar table.k-content tr td.k-state-selected ~ td { background-color: #2196F3; }

This will light up all the week when the mouse hovers a row, yet still display the selected day AND any following day that week in a different color. The trick to make this work is to make sure the selected day is actually always the first day of the week.

To do so (and to extract the week start and week end dates), use the change event :

    onChange: function (e, callback) {
            // Set the culture, since the first day of a week might be different
            moment.locale(GetCulture());

            // Get the selected date and calculate the start and end of week
            var weekStart = moment(e.sender.value()).startOf('week').toDate();
            var weekEnd = moment(weekStart).add(6, 'day').toDate();

            // Always reset the date to the start of the week (the style needs it)
            e.sender.value(weekStart);

            // Do whatever else you want here
        }

This solution requires the use of moment.js, a library that was already in use in my project. There are potentially other ways to do the same, but this one is simple enough.

All that's left should be minor details, like changing the text of the "Current Day" footer to read "Current Week", which is trivial to do via the open event :

widget.one("open", function (e) {
        $('.k-footer a.k-nav-today', e.sender.dateView.popup.element).text("Current Week");
});