How do I split up the Year and Month selection in the calendar

Date and time pickers
1

I’m trying to make the selection of Year and Month separate. I need to know what I should add/modify in order to make this work.

This is the header function

 renderCalendarHeader: function () {
 return (
            '<div class="mbsc-flex mbsc-flex-1-0 mbsc-justify-content-right">' +
            '<div mbsc-calendar-prev class="custom-prev"></div>' +
            '<div mbsc-calendar-nav class="custom-nav"></div>' +
            '<div mbsc-calendar-next class="custom-next"></div>' +
            "</div>"
          );

fullView
fullView604×713 53.6 KB

2

Hi @Siddharth,

It is totally possible to implement it with the help of the renderCalendarHeader option. You’ll need to create the custom markup and logic for it.

This option takes a function that should return the desired markup. In your case instead of using the built-in mbsc-calendar-nav element, you’ll have to add those two dropdowns and handle the value change manually.
When those dropdown values are changed you can use the navigate method to navigate the calendar to the selected month/year;

3

Thanks, let me check it once and ping here back after the completion of testing this idea