Kendo Scheduler Navigation Links(Prev/Next)

[Jeff]

I have disabled few Dates in kendo Calendar . How to do Next/Prev button link to jump to the only Enabled dates? Right now it jumps to disabled dates even though those are not available to click on. 

 

Thanks in advance

Amita

[Veselin Tsvetanov]

Hi Jeff,

May I ask you to share with us a small sample of how exactly you have disabled those dates? Are they dates in the Calendar widget, as you mention in your post, or in the Scheduler, as you have marked the topic of the current thread?

Regards,
Veselin Tsvetanov
Progress Telerik

[Jeff]

Thanks Veselin for reply.

We are using KendoScheduler control and Calendar widget is the part of that control.

Here is the code... 

 myScheduler.SchedulerControl = $('#schedulerdemo').data("kendoScheduler");

var schedDateLink = $('ul.k-scheduler-navigation').find('.k-nav-current');

 disabled = [27];

      schedDateLink.on('click', function () {
          setTimeout(function () {
            var schedCalendar = $('.k-scheduler-calendar.k-widget.k-calendar').data('kendoCalendar');
           schedCalendar.setOptions({
             min: new Date(minDate),//06/25/2018
             max: new Date(maxDate),//06/28/2018
               disableDates: function (date) {
                if (date && disabled.indexOf(date.getDate()) > -1) {
                  return true;
                } else {
                  return false;
                }
               },
              // change: myScheduler.onChange,
            });
          }, 100);
        });

 

I see two problem here regards to Prev/Next links.

1) Disabled dates are accessible on Prev/Next buttons.

2) I have specified range for scheduler control & Calendar widget with following properties.

     StartTime -EndTime for scheduler control (06/25/2018-06/28/2018)

    Min-Max for Calendar widget (06/25/2018-06/28/2018)

But I can still access all the Dates prior to 06/25 and future dates after 06/28 dates on Prev/Next buttons .

 

 

 

 

 

 

[Veselin Tsvetanov]

Hi Jeff,

Configuring the Calendar navigation widget of the Scheduler to have min and max dates and disabled dates would not limit the navigation options of the Scheduler itself. Therefore, in order to prevent the user from navigating to undesired dates you will need to implement a handler for the navigate event of the Scheduler:

$("#scheduler").kendoScheduler({
  navigate: function(e) {
    var navigateToDate = e.date;

    if (navigateToDate < minDate || navigateToDate > maxDate) {
      e.preventDefault();
    } else if (disabledDates.indexOf(navigateToDate.getTime()) > -1) {
      e.preventDefault();
      if (e.action === 'next') {
        e.sender.date(new Date(navigateToDate.getTime() + 86400000));
      } else if (e.action === "previous") {
        e.sender.date(new Date(navigateToDate.getTime() - 86400000));
      }
    }
  },

With the above you will prevent any navigation outside of the configured range and will skip the disabled dates in that range

Here you will find a small sample implementing the above suggestion. 

Regards,
Veselin Tsvetanov
Progress Telerik

[Jeff]

Thanks Veselin for reply.

This works great.It was very helpful.