Scheduler - How do I disable all timeslots by default and only allow certain timeslots to be open?

Event calendars & schedulers
1

Hi,

I came across an example where certain time frames can be disabled to block event creation (Vue Scheduler Blocked out times Example | Mobiscroll). However, my use case is the opposite.

I need all timeslots to be disabled by default, and after calling an API, the response will return specific dates and times that can be scheduled. I’d like to enable only those specific time blocks, making them clickable and allowing event creation on the Mobiscroll scheduler.

Is this possible? I couldn’t find any demos or examples showing this functionality.

Thank you!

2

Hello @David_Lai :wave:

At the moment we don’t have a built in “valid” option, which would enable only the specified time slot. However currently this is achievable with invalid option, which is used in the mentioned Vue Scheduler Blocked out times Example demo.
​
You can disable all the available time slots with the help of a recurring invalid rule:
​

​const myInvalid = [{
recurring: {
repeat: 'daily',
},
recurringException: ['2025-02-21', '2025-02-22'], // pass exceptions
}]

​
After you get the available timeslots from your API you’ll have to process it and update the invalid option to ensure that the specific time range became valid.
​