Mark Holidays in Month View

Environment

Product

Progress® Kendo UI® Scheduler for jQuery

Description

How can I apply custom styling to a holiday time-slot in the Scheduler month view?

Solution

Implement a dataBound event handler. In the handler, iterate over all the sloths that are available on the screen and alter the styling for the required dates, use the following approach:

    <div id="scheduler"></div>
    <script>
        function onDataBound(e) {
            var scheduler = e.sender;
            var slots = $('.k-scheduler-content td[role=gridcell]');

            for (var i = 0; i < slots.length; i += 1) {
                var currentSlot = $(slots[i]);
                var slotData = scheduler.slotByElement(currentSlot);

                if (slotData.startDate.getTime() === new Date("2013/6/8").getTime()) {
                    currentSlot.css('background-color', 'red');
                }
            }
        }

        $("#scheduler").kendoScheduler({
            date: new Date("2013/6/6"),
            views: [ "month" ],
            dataBound: onDataBound,
            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"
            }]
        });
  </script>