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 event-update-failed / event-create-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.
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 toastMessage = ref(null)
const isToastOpen = ref(false)
const myInvalid = [
{
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',
}
]
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
}
</script>
<template>
<MbscEventcalendar
:dragToCreate="true"
:dragToMove="true"
:dragToResize="true"
:invalid="myInvalid"
invalidateEvent="strict "
@event-create-failed="handleEventCreateFailed"
@event-update-failed="handleEventUpdateFailed"
/>
<MbscToast
:message="toastMessage"
:isOpen="isToastOpen"
@close="handleToastClose"
/>
</template>
SFC JSSFC TS
<script setup>
import {
getJson,
MbscEventcalendar,
MbscToast,
setOptions
} from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const myEvents = ref([])
const toastMessage = ref(null)
const isToastOpen = ref(false)
const myView = {
calendar: { labels: true }
}
const myInvalid = [
{
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'
}
]
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/work-events/',
(events) => {
myEvents.value = events
},
'jsonp'
)
})
</script>
<template>
<MbscEventcalendar
:data="myEvents"
:view="myView"
:invalid="myInvalid"
:dragToCreate="true"
:dragToMove="true"
:dragToResize="true"
invalidateEvent="strict"
@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 } from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const myEvents = ref<MbscCalendarEvent[]>([])
const toastMessage = ref('')
const isToastOpen = ref(false)
const myView = {
calendar: { labels: true }
}
const myInvalid = [
{
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'
}
]
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/work-events/',
(events: MbscCalendarEvent[]) => {
myEvents.value = events
},
'jsonp'
)
})
</script>
<template>
<MbscEventcalendar
:data="myEvents"
:view="myView"
:invalid="myInvalid"
:dragToCreate="true"
:dragToMove="true"
:dragToResize="true"
invalidateEvent="strict"
@event-create-failed="handleEventCreateFailed"
@event-update-failed="handleEventUpdateFailed"
/>
<MbscToast :message="toastMessage" :isOpen="isToastOpen" @close="handleToastClose" />
</template>