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 event-create-failed / event-update-failed 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 →
Demo
Configure the built-in validation
Events cannot start or end on invalids, but can overlap
Events cannot overlap invalid ranges at all
<script setup>
const myInvalid = [
{
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'
}
}
]
function handleEventCreateFailed() {
toastMessage.value = 'Can\'t create event on this date'
isToastOpen.value = true
}
function handleEventUpdateFailed() {
toastMessage.value = 'Can\'t add event on this date'
isToastOpen.value = true
}
</script>
<template>
<MbscEventcalendar
invalidateEvent="strict "
:invalid="myInvalid"
:dragToCreate="true"
:dragToMove="true"
:dragToResize="true"
@event-create-failed="handleEventCreateFailed"
@event-update-failed="handleEventUpdateFailed"
/>
</template> 
SFC JSSFC TS
<script setup>
import {
getJson,
MbscEventcalendar,
MbscToast,
setOptions
} from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const myView = {
scheduler: { type: 'week' }
}
const myEvents = ref([])
const myInvalid = [
{
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'
}
}
]
const isToastOpen = ref(false)
const toastMessage = ref('')
function handleEventCreateFailed() {
toastMessage.value = "Can't create event on this date"
isToastOpen.value = true
}
function handleEventUpdateFailed() {
toastMessage.value = "Can't add event on this date"
isToastOpen.value = true
}
function handleToastClose() {
isToastOpen.value = false
}
onMounted(() => {
getJson(
'https://trial.mobiscroll.com/workday-events/',
(events) => {
myEvents.value = events
},
'jsonp'
)
})
</script>
<template>
<MbscEventcalendar
invalidateEvent="strict"
:dragToCreate="true"
:dragToMove="true"
:dragToResize="true"
:view="myView"
:data="myEvents"
:invalid="myInvalid"
@event-create-failed="handleEventCreateFailed"
@event-update-failed="handleEventUpdateFailed"
/>
<MbscToast :message="toastMessage" :isOpen="isToastOpen" @close="handleToastClose" />
</template>
<script setup lang="ts">
import {
getJson,
MbscEventcalendar,
MbscToast,
setOptions
} from '@mobiscroll/vue'
import type { MbscCalendarEvent, MbscEventcalendarView } from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const myView: MbscEventcalendarView = {
scheduler: { type: 'week' }
}
const myEvents = ref<MbscCalendarEvent[]>([])
const myInvalid = [
{
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'
}
}
]
const isToastOpen = ref<boolean>(false)
const toastMessage = ref<string>('')
function handleEventCreateFailed() {
toastMessage.value = "Can't create event on this date"
isToastOpen.value = true
}
function handleEventUpdateFailed() {
toastMessage.value = "Can't add event on this date"
isToastOpen.value = true
}
function handleToastClose() {
isToastOpen.value = false
}
onMounted(() => {
getJson(
'https://trial.mobiscroll.com/workday-events/',
(events: MbscCalendarEvent[]) => {
myEvents.value = events
},
'jsonp'
)
})
</script>
<template>
<MbscEventcalendar
invalidateEvent="strict"
:dragToCreate="true"
:dragToMove="true"
:dragToResize="true"
:view="myView"
:data="myEvents"
:invalid="myInvalid"
@event-create-failed="handleEventCreateFailed"
@event-update-failed="handleEventUpdateFailed"
/>
<MbscToast :message="toastMessage" :isOpen="isToastOpen" @close="handleToastClose" />
</template>