The event calendar is fully responsive. It adapts to the available space and fills the screen to look good everywhere. While you don't have to worry about the width the height can be manually adjusted with the height option.
Use the responsive option to configure how the calendar behaves on different sized screens. The responsive option is equipped with five breakpoints - xsmall (up to 575px), small (up to 767px), medium (up to 991px), large (up to 1199px), xlarge (from 1200px). Custom breakpoints can be added if necessary: my-custom-breakpoint: { breakpoint: 600 } (from 600px up to the next breakpoint).
Demo
<script setup>
const myResponsive = {}
</script>
<template>
<MbscEventcalendar
:responsive="myResponsive"
/>
</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 myResponsive = {
xsmall: {
view: {
calendar: {
type: 'week'
},
agenda: {
type: 'day'
}
}
},
custom: {
// Custom breakpoint
breakpoint: 600,
view: {
calendar: {
labels: true
}
}
}
}
onMounted(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events) => {
myEvents.value = events
},
'jsonp'
)
})
</script>
<template>
<MbscEventcalendar :clickToCreate="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete="" :data="myEvents" :responsive="myResponsive" />
</template>
<script setup lang="ts">
import { getJson, MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import type {
MbscCalendarEvent,
MbscEventcalendarOptions,
MbscResponsiveOptions
} from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const myEvents = ref<MbscCalendarEvent[]>([])
const myResponsive: MbscResponsiveOptions<MbscEventcalendarOptions> = {
xsmall: {
view: {
calendar: {
type: 'week'
},
agenda: {
type: 'day'
}
}
},
custom: {
// Custom breakpoint
breakpoint: 600,
view: {
calendar: {
labels: true
}
}
}
}
onMounted(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events: MbscCalendarEvent[]) => {
myEvents.value = events
},
'jsonp'
)
})
</script>
<template>
<MbscEventcalendar :clickToCreate="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete="" :data="myEvents" :responsive="myResponsive" />
</template>