Month picker content template

[Morten]

I have a kendoDatePicker with dept set to year acting as a month filter on data displayed in a grid.
I want to visualize for the user if a particular month has data and am looking for a way to customize the content of the month cells.

$("#period-filter").kendoDatePicker({
    start: "year",
    depth: "year",
    format: "MMM yyyy",
    value: new Date
});

See screenshot.

It seems the API does not support such a scenario out of the box.

Any suggestions?

/Morten

 

[Neli]

Hello Morten,

Indeed, the kendo DatePicker does not provide an option to use templates for the displayed month. What I would suggest if it is suitable in your scenario is to handle the open event of the component. Then you can find the needed elements and apply custom styling:

open: function(e){         
          if($('.k-calendar-yearview').length >0){
            $('.k-calendar-yearview').find('.k-calendar-td').eq(2).css('background', 'lightgreen')
            $('.k-calendar-yearview').find('.k-calendar-td').eq(4).css('background', 'lightgreen')
          }
        }

Here you will find such an example - https://dojo.telerik.com/@NeliKondova/IZaqiQEb

I hope this helps. 

Regards,
Neli
Progress Telerik