Double Booking Prevention
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 or globally on the instance.
- On an event basis - by setting the
overlapproperty tofalsethe specified event cannot overlap. - Globally on the instance - by setting
eventOverlapoption tofalseoverlap is disbled globally.
If set to false, 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)
Events cannot overlap
eventOverlap=false<script setup>
// relevant events
const myData = [{
start: '2026-10-29T00:00',
end: '2026-10-31T00:00',
title: 'Event 2 (no event overlap)',
overlap: false
}, {
start: '2026-11-03T00:00',
end: '2026-11-05T00:00',
title: 'Event 4 (no event overlap)',
overlap: false
}];
</script>
<template>
<MbscEventcalendar
:view="{calendar: {type: 'month', labels: 'all'}}"
:data="myData"
:clickToCreate="true"
:dragToCreate="true"
:dragToMove="true"
:dragToResize="true"
:eventOverlap="true "
:exclusiveEndDates="true"
/>
</template>
SFC JSSFC TS
<script setup>
import { MbscEventcalendar, MbscToast, setOptions } from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const now = new Date()
const y = now.getFullYear()
const m = now.getMonth()
const d = now.getDate()
const toastMessage = 'Make sure not to double book'
const isToastOpen = ref(false)
function onEventFailed() {
isToastOpen.value = true
}
function handleToastClose() {
isToastOpen.value = false
}
const myView = {
calendar: { type: 'month', labels: 'all' }
}
const myEvents = ref([
{
start: new Date(y, m, d - 3),
end: new Date(y, m, d - 1),
title: 'Event 1'
},
{
start: new Date(y, m, d),
end: new Date(y, m, d + 2),
title: 'Event 2 (no event overlap)',
overlap: false
},
{
start: new Date(y, m, d + 3),
end: new Date(y, m, d + 5),
title: 'Event 3'
},
{
start: new Date(y, m, d + 5),
end: new Date(y, m, d + 7),
title: 'Event 4 (no event overlap)',
overlap: false
}
])
</script>
<template>
<MbscEventcalendar
:view="myView"
:data="myEvents"
:dragToMove="true"
:dragToResize="true"
:dragToCreate="true"
:clickToCreate="true"
:eventOverlap="false"
:exclusiveEndDates="true"
@event-update-failed="onEventFailed"
@event-create-failed="onEventFailed"
/>
<MbscToast :message="toastMessage" :isOpen="isToastOpen" @close="handleToastClose" />
</template>
<script setup lang="ts">
import { MbscEventcalendar, MbscToast, setOptions } from '@mobiscroll/vue'
import type { MbscCalendarEvent, MbscEventcalendarView } from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const now = new Date()
const y = now.getFullYear()
const m = now.getMonth()
const d = now.getDate()
const toastMessage = 'Make sure not to double book'
const isToastOpen = ref<boolean>(false)
function onEventFailed() {
isToastOpen.value = true
}
function handleToastClose() {
isToastOpen.value = false
}
const myView: MbscEventcalendarView = {
calendar: { type: 'month', labels: 'all' }
}
const myEvents = ref<MbscCalendarEvent[]>([
{
start: new Date(y, m, d - 3),
end: new Date(y, m, d - 1),
title: 'Event 1'
},
{
start: new Date(y, m, d),
end: new Date(y, m, d + 2),
title: 'Event 2 (no event overlap)',
overlap: false
},
{
start: new Date(y, m, d + 3),
end: new Date(y, m, d + 5),
title: 'Event 3'
},
{
start: new Date(y, m, d + 5),
end: new Date(y, m, d + 7),
title: 'Event 4 (no event overlap)',
overlap: false
}
])
</script>
<template>
<MbscEventcalendar
:view="myView"
:data="myEvents"
:dragToMove="true"
:dragToResize="true"
:dragToCreate="true"
:clickToCreate="true"
:eventOverlap="false"
:exclusiveEndDates="true"
@event-update-failed="onEventFailed"
@event-create-failed="onEventFailed"
/>
<MbscToast :message="toastMessage" :isOpen="isToastOpen" @close="handleToastClose" />
</template>