Hide All-Day Section
Hide the all-day events section of the scheduler by setting the allDay property under the view.scheduler option.
Demo
Control over the all-day section
Show all-day events
<script setup>
myView = {
scheduler: {
type: 'week ',
allDay: true
}
}
</script>
<template>
<MbscDatepicker :view="myView" />
</template>

SFC JSSFC TS
<script setup>
import { getJson, MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const myEvents = ref([])
const myView = {
scheduler: {
type: 'week',
allDay: false
}
}
onMounted(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events) => {
myEvents.value = events
},
'jsonp'
)
})
</script>
<template>
<MbscEventcalendar :clickToCreate="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete="" :view="myView" :data="myEvents" />
</template>
<script setup lang="ts">
import { getJson, MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import type { MbscCalendarEvent, MbscEventcalendarView } from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const myEvents = ref<MbscCalendarEvent[]>([])
const myView: MbscEventcalendarView = {
scheduler: {
type: 'week',
allDay: false
}
}
onMounted(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events: MbscCalendarEvent[]) => {
myEvents.value = events
},
'jsonp'
)
})
</script>
<template>
<MbscEventcalendar :clickToCreate="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete="" :view="myView" :data="myEvents" />
</template>