Disable Days in the Popup Calendar of the Scheduler

Environment

Product

Progress® Kendo UI® Scheduler for jQuery

Description

How to disable particular days—for example, Sundays— in the popup calendar of the Kendo UI Scheduler widget?

Solution

1. Subscribe for the click event of the date link.
2. Get a reference to the Kendo UI Calendar.
3. Use the setOptions method to specify the disabledDates with a timeOut. You need the timeout because at the time of the click event, the calendar is not yet initialized.

<div id="scheduler"></div>
<script>
    $("#scheduler").kendoScheduler({
        date: new Date("2013/6/6"),
        views: ["day", "month"], // day and month views
        dataSource: [{
                id: 1,
                start: new Date("2013/6/6 08:00 AM"),
                end: new Date("2013/6/6 09:00 AM"),
                title: "Interview"
            },
            {
                id: 2,
                start: new Date("2013/6/6 08:00 AM"),
                end: new Date("2013/6/6 09:00 AM"),
                title: "Meeting"
            }
        ]
    });
    var schedDateLink = $('.k-scheduler-toolbar').find('.k-nav-current');
    schedDateLink.on('click', function() {
        setTimeout(function() {
            var schedCalendar = $('.k-scheduler-calendar.k-widget.k-calendar').data('kendoCalendar');
            schedCalendar.setOptions({
                disableDates: ['su']
            });
        }, 100);
    });
</script>