Kendo UI Scheduler disable multiple time-span/range of a single day

Question

I have a scheduler which will be used by creators and consumers. Creators will define a specific time range (create an event) in where the consumers can interact. In the other time ranges of that day, consumers can not interact and will be disabled. I did managed to create the events without any problem, but showing the available slots for interaction is causing me problems.

Example: Suppose, the creator defines the allowed time slot as 4:00 pm to 8:00 pm (which I successfully can save in database and display accordingly). So, in the consumers view, the scheduler should be disabled from 12:00 am to 4:00 pm and from 8:00 pm to 12:00 am and enabled from 4:00 pm to 8:00 pm. That means the consumers can create multiple event in between 4:00 pm to 8:00 pm.

I need the appropriate scheduler options which I can use as the datasource.

Answer 1

You can use the save event to prevent creating the events and simply only show the range that is allowed:

var startLimit = new Date();
startLimit.setHours(4);
startLimit.setMinutes(0);
startLimit.setSeconds(0);

var endLimit = new Date();
endLimit.setHours(8);
endLimit.setMinutes(0);
endLimit.setSeconds(0);

$("#scheduler").kendoScheduler({
    date: new Date(),
    views: [{
        type: "day",
        startTime: startLimit,
        endTime: endLimit
    }],
    dataSource: [],
    save: function (e) {
        if (e.event.start < startLimit || e.event.end > endLimit) {
            console.log("disallow"); // show validation error or w/e
            e.preventDefault();
        }
    }
});