Blocked Time Ranges

Entire days and time ranges can be blocked out to manage event creation and editing more efficiently.

To disable specific times, ranges, days or recurring days and times you can pass an array to the invalid option. A couple of examples:

  • To disable weekends, use the recurring object - recurring: { repeat: 'weekly', weekDays: 'SA,SU' }
  • Lunch break between 12 PM and 1 PM with title - { start: "12:00", end: "13:00", title: 'Lunch break', recurring: { repeat: 'weekly', weekDays: 'MO,TU,WE,TH,FR' }

When dragging events onto disabled days or time-slots, they will automatically be denied and onEventCreateFailed / onEventUpdateFailed events will be triggered, from which custom logic can be executed to show a toast or maybe a modal for data correction. The built-in logic of how the calendar handles validation on user interaction can be controlled through the invalidateEvent option:

  • 'strict' - Strict being the default, no event overlap is allowed with invalid ranges.
  • 'start-end' - With start-end validation the calendar checks if the start or end of the event coincides with any invalid range. Other overlaps are allowed.

If you're interested in invalids for a given range (including recurring occurrences), you can use the getInvalids function.

Want to prevent double booking?  Learn how to manage event overlaps →
Download and try example

Demo

Configure the built-in validation
Events cannot start or end on invalids, but can overlap
Events cannot overlap invalid ranges at all
Javascript jQuery Angular React Vue 
mobiscroll.eventcalendar('#scheduler', {
    dragToCreate: true,
    dragToMove: true,
    dragToResize: true,
    invalidateEvent: 'strict',
    invalid: [{
        recurring: {
            repeat: 'weekly',
            weekDays: 'SA,SU'
        }
    }, {
        start: '12:00',
        end: '13:00',
        title: 'Lunch break',
        recurring: {
            repeat: 'weekly',
            weekDays: 'MO,TU,WE,TH,FR'
        }
    }, {
        start: '00:00',
        end: '08:00',
        recurring: {
            repeat: 'weekly',
            weekDays: 'MO,TU,WE,TH,FR'
        }
    }, {
        start: '17:00',
        end: '23:59',
        recurring: {
            repeat: 'weekly',
            weekDays: 'MO,TU,WE,TH,FR'
        }
    }],
    onEventCreateFailed: function () {
        mobiscroll.toast({
            message: 'Can\'t create event on this date'
        });
    },
    onEventUpdateFailed: function () {
        mobiscroll.toast({
            message: 'Can\'t add event on this date'
        });
    }
});
Preview in fullscreen
Block weekends, holidays, and lunch breaks in the Scheduler using recurring unavailable ranges — choose strict or start-end validation.

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.