Kendo Scheduler Navigation Links(Prev/Next)

5 posts, 0 answers
  1. Jeff
    Jeff avatar
    5 posts
    Member since:
    Jan 2012

    Posted 05 Jun 2018 Link to this post

    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

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1231 posts

    Posted 07 Jun 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jeff
    Jeff avatar
    5 posts
    Member since:
    Jan 2012

    Posted 07 Jun 2018 in reply to Veselin Tsvetanov Link to this post

    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 .

     

     

     

     

     

     

  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1231 posts

    Posted 11 Jun 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Jeff
    Jeff avatar
    5 posts
    Member since:
    Jan 2012

    Posted 13 Jun 2018 in reply to Veselin Tsvetanov Link to this post

    Thanks Veselin for reply.

    This works great.It was very helpful.

     

     

     

Back to Top