Prevent Double Booking
Sometimes it is necessary to guarantee that events don't overlap - eg. when scheduling workorders, interacting with a work calendar. You can reject the updates or additions and let the user know about it.
The event overlap can be turned on/off on an event basis, per resource or globally on the instance.
- On an event basis - by setting the
overlapproperty tofalsethe specified event cannot overlap. - Per resource - by setting the
eventOverlapproperty tofalsethe events in the specified resource cannot overlap. - Globally on the instance - by setting
eventOverlapoption tofalseoverlap is disbled globally.
If set to false, the resource and the event settings have precedence over the global calendar eventOverlap option.
Give feedback to the user - optionally, a toast can be displayed to explain why an event cannot be dropped, moved or created. For this we can use the onEventCreateFailed and onEventUpdateFailed lifecycle events.
Looking to implement time off or block out ranges? Learn how to add lunch breaks, working hours and disable weekends →
Demo
Control the interaction globally (all events/resources)
Events cannot overlap
eventOverlap=false// relevant events
const myData = [{
start: '2026-10-30T16:00',
end: '2026-10-30T17:00',
title: 'Event 2 (no event overlap)',
overlap: false,
resource: 1
},{
start: '2026-10-30T08:00',
end: '2026-10-30T10:00',
title: 'Event 4 (no event overlap)',
overlap: false,
resource: 2
}];
// relevant resource
const myResources = [{
id: 4,
name: 'Resource 4 - no event overlap allowed',
eventOverlap: false
}];
<Eventcalendar
view={{
scheduler: { type: 'day' }
}}
data={myData}
resources={myResources}
dragToMove={true}
dragToResize={true}
eventOverlap={true }
clickToCreate={true}
dragToCreate={true}
/>
JSXTSX
import { Eventcalendar, setOptions, Toast } from '@mobiscroll/react';
import { useCallback, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const now = new Date();
const y = now.getFullYear();
const m = now.getMonth();
const d = now.getDate();
function App() {
const [isToastOpen, setToastOpen] = useState(false);
const myEvents = useMemo(
() => [
{
start: new Date(y, m, d, 11),
end: new Date(y, m, d, 13),
title: 'Event 1',
resource: 1,
},
{
start: new Date(y, m, d, 16),
end: new Date(y, m, d, 17),
title: 'Event 2 (no event overlap)',
overlap: false,
resource: 1,
},
{
start: new Date(y, m, d, 14),
end: new Date(y, m, d, 16),
title: 'Event 3',
resource: 2,
},
{
start: new Date(y, m, d, 8),
end: new Date(y, m, d, 10),
title: 'Event 4 (no event overlap)',
resource: 2,
overlap: false,
},
{
start: new Date(y, m, d, 10),
end: new Date(y, m, d, 13),
title: 'Event 5',
resource: 3,
},
{
start: new Date(y, m, d, 11),
end: new Date(y, m, d, 16),
title: 'Event 6',
resource: 4,
},
],
[],
);
const myResources = useMemo(
() => [
{
id: 1,
name: 'Resource 1',
},
{
id: 2,
name: 'Resource 2',
},
{
id: 3,
name: 'Resource 3',
},
{
id: 4,
name: 'Resource 4 - no event overlap allowed',
eventOverlap: false,
},
],
[],
);
const myView = useMemo(
() => ({
scheduler: { type: 'day' },
}),
[],
);
const handleEventFailed = useCallback(() => {
setToastOpen(true);
}, []);
const handleCloseToast = useCallback(() => {
setToastOpen(false);
}, []);
return (
<div>
<Eventcalendar
data={myEvents}
resources={myResources}
view={myView}
dragToCreate={true}
dragToMove={true}
dragToResize={true}
clickToCreate={true}
eventOverlap={true}
onEventUpdateFailed={handleEventFailed}
onEventCreateFailed={handleEventFailed}
/>
<Toast message="Make sure not to double book" isOpen={isToastOpen} onClose={handleCloseToast} />
</div>
);
}
export default App;
import {
Eventcalendar,
MbscCalendarEvent,
MbscEventcalendarView,
MbscResource,
setOptions,
Toast ,
} from '@mobiscroll/react';
import { FC, useCallback, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const now = new Date();
const y = now.getFullYear();
const m = now.getMonth();
const d = now.getDate();
const App: FC = () => {
const [isToastOpen, setToastOpen] = useState<boolean>(false);
const myEvents = useMemo<MbscCalendarEvent[]>(
() => [
{
start: new Date(y, m, d, 11),
end: new Date(y, m, d, 13),
title: 'Event 1',
resource: 1,
},
{
start: new Date(y, m, d, 16),
end: new Date(y, m, d, 17),
title: 'Event 2 (no event overlap)',
overlap: false,
resource: 1,
},
{
start: new Date(y, m, d, 14),
end: new Date(y, m, d, 16),
title: 'Event 3',
resource: 2,
},
{
start: new Date(y, m, d, 8),
end: new Date(y, m, d, 10),
title: 'Event 4 (no event overlap)',
resource: 2,
overlap: false,
},
{
start: new Date(y, m, d, 10),
end: new Date(y, m, d, 13),
title: 'Event 5',
resource: 3,
},
{
start: new Date(y, m, d, 11),
end: new Date(y, m, d, 16),
title: 'Event 6',
resource: 4,
},
],
[],
);
const myResources = useMemo<MbscResource[]>(
() => [
{
id: 1,
name: 'Resource 1',
},
{
id: 2,
name: 'Resource 2',
},
{
id: 3,
name: 'Resource 3',
},
{
id: 4,
name: 'Resource 4 - no event overlap allowed',
eventOverlap: false,
},
],
[],
);
const myView = useMemo<MbscEventcalendarView>(
() => ({
scheduler: { type: 'day' },
}),
[],
);
const handleEventFailed = useCallback(() => {
setToastOpen(true);
}, []);
const handleCloseToast = useCallback(() => {
setToastOpen(false);
}, []);
return (
<div>
<Eventcalendar
data={myEvents}
resources={myResources}
view={myView}
dragToCreate={true}
dragToMove={true}
dragToResize={true}
clickToCreate={true}
eventOverlap={true}
onEventUpdateFailed={handleEventFailed}
onEventCreateFailed={handleEventFailed}
/>
<Toast message="Make sure not to double book" isOpen={isToastOpen} onClose={handleCloseToast} />
</div>
);
};
export default App;