Blocked Days and Date Ranges

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

To disable specific or recurring days 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' }
  • Disable a specific range - { start: new Date(2020, 11, 19), end: new Date(2020, 11, 20) }

When dragging events onto disabled days, 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.

Get started with this 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 
html<mbsc-eventcalendar
    [dragToCreate]="true"
    [dragToMove]="true"
    [dragToResize]="true"
    invalidateEvent="strict"
    [invalid]="invalid"
    (onEventCreateFailed)="onEventCreateFailed()"
    (onEventUpdateFailed)="onEventUpdateFailed()">
</mbsc-eventcalendar>
tsinvalid: [
    {
        recurring: {
            repeat: 'weekly',
            weekDays: 'SA,SU'
        }
    }, {
        start: '2026-10-19T00:00',
        end: '2026-10-20T00:00'
        title: 'Team offsite',
        allDay: true
    }, {
        start: '2026-10-26T00:00',
        end: '2026-10-27T00:00',
        title: 'Team offsite',
        allDay: true
    }
];
             
onEventCreateFailed () {
    this.notify.toast({
        message: 'Can\'t create event on this date'
    });
};

onEventUpdateFailed () {
    this.notify.toast({
        message: 'Can\'t add event on this date'
    });
};
Preview in fullscreen
Disable weekends and date ranges in a event calendar — block dates and drag-and-drop, and choose between strict or permissive validation modes.

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.