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.
Demo
Configure the built-in validation
Events cannot start or end on invalids, but can overlap
Events cannot overlap invalid ranges at all
const inv = [
{
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
}
];
const onEventCreateFailed = React.useCallback(() => {
mobiscroll.toast({
message: 'Can\'t create event on this date'
});
});
const onEventUpdateFailed = React.useCallback(() => {
mobiscroll.toast({
message: 'Can\'t add event on this date'
});
});
<Eventcalendar
dragToCreate={true}
dragToMove={true}
dragToResize={true}
invalidateEvent="strict "
invalid={inv}
onEventCreateFailed={onEventCreateFailed}
onEventUpdateFailed={onEventUpdateFailed}/>
JSXTSX
import { Eventcalendar, getJson, setOptions, Toast } from '@mobiscroll/react';
import { useCallback, useEffect, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [myEvents, setEvents] = useState([]);
const [isToastOpen, setToastOpen] = useState(false);
const [toastText, setToastText] = useState();
const myInvalid = useMemo(
() => [
{
recurring: {
repeat: 'weekly',
weekDays: 'SA,SU',
},
},
{
allDay: true,
start: '2026-10-19T00:00',
end: '2026-10-20T00:00',
},
{
allDay: true,
start: '2026-10-26T00:00',
end: '2026-10-27T00:00',
},
],
[],
);
const myView = useMemo(() => ({ calendar: { labels: true } }), []);
const handleEventCreateFailed = useCallback(() => {
setToastText("Can't create event on this date");
setToastOpen(true);
}, []);
const handleEventUpdateFailed = useCallback(() => {
setToastText("Can't add event on this date");
setToastOpen(true);
}, []);
const handleToastClose = useCallback(() => {
setToastOpen(false);
}, []);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/work-events/',
(events) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
<>
<Eventcalendar
data={myEvents}
view={myView}
dragToCreate={true}
dragToMove={true}
dragToResize={true}
invalidateEvent="strict"
invalid={myInvalid}
onEventCreateFailed={handleEventCreateFailed}
onEventUpdateFailed={handleEventUpdateFailed}
/>
<Toast message={toastText} isOpen={isToastOpen} onClose={handleToastClose} />
</>
);
}
export default App;
import { Eventcalendar, getJson, MbscCalendarEvent, setOptions, Toast } from '@mobiscroll/react';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);
const [isToastOpen, setToastOpen] = useState<boolean>(false);
const [toastText, setToastText] = useState<string>();
const myInvalid = useMemo(
() => [
{
recurring: {
repeat: 'weekly',
weekDays: 'SA,SU',
},
},
{
allDay: true,
start: '2026-10-19T00:00',
end: '2026-10-20T00:00',
},
{
allDay: true,
start: '2026-10-26T00:00',
end: '2026-10-27T00:00',
},
],
[],
);
const myView = useMemo(
() => ({
calendar: {
labels: true,
},
}),
[],
);
const handleEventCreateFailed = useCallback(() => {
setToastText("Can't create event on this date");
setToastOpen(true);
}, []);
const handleEventUpdateFailed = useCallback(() => {
setToastText("Can't add event on this date");
setToastOpen(true);
}, []);
const handleToastClose = useCallback(() => {
setToastOpen(false);
}, []);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/work-events/',
(events: MbscCalendarEvent[]) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
<div>
<Eventcalendar
data={myEvents}
view={myView}
dragToCreate={true}
dragToMove={true}
dragToResize={true}
invalidateEvent="strict"
invalid={myInvalid}
onEventCreateFailed={handleEventCreateFailed}
onEventUpdateFailed={handleEventUpdateFailed}
/>
<Toast message={toastText} isOpen={isToastOpen} onClose={handleToastClose} />
</div>
);
};
export default App;