Month picker content template

1 Answer 44 Views
Date/Time Pickers
Morten
Top achievements
Rank 1
Iron
Iron
Veteran
Morten asked on 02 Nov 2023, 06:09 AM

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

 

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 06 Nov 2023, 02:19 PM

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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Tags
Date/Time Pickers
Asked by
Morten
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Neli
Telerik team
Share this question
or