Large Dataset Performance
Usage
theme: 'ios' You can turn auto theming on and let it decide based on the platform.
Usage
themeVariant: 'light' You can turn auto dark mode on based on system settings.
Usage
clickToCreate: true,
// click to create is on dragToCreate: true,
// drag to create is on dragToMove: true,
// reordering is on dragToResize: true,
// resizing is on eventDelete: true
// deleting is on Fine-tune drag & drop with these options, which are false by default.
Usage
locale: localeEn Selecting the locale loads the localized settings and the translated UI text.
Large Dataset Performance
The scheduler supports virtual horizontal and vertical scrolling. The view virtualization makes it possible to work with many resources across long date ranges.
The following examples shows that navigating 20 resources across a whole month with 2000 events won't pose any problems for the browser neither on mobile or desktop.
View virtualization is always enabled and doesn't need to be turned on explicitly.
Demo
Code
View code on GitHub
<script setup>
import { MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const myEvents = ref([])
const myView = {
scheduler: {
type: 'month',
timeCellStep: 15,
timeLabelStep: 15
}
}
const resourceNr = 20
const eventsNr = 2000
const myResources = []
const myEventColors = ['#ff0101', '#239a21', '#8f1ed6', '#01adff', '#d8ca1a']
for (let i = 1; i <= resourceNr; i++) {
myResources.push({ name: 'Resource ' + i, id: i })
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min) + min)
}
function handlePageLoading(args) {
setTimeout(() => {
const newEvents = []
const year = args.firstDay.getFullYear()
const month = args.firstDay.getMonth()
const daysInMonth = new Date(year, month + 1, 0).getDate()
// Generate random events for the visible month
for (let i = 0; i < eventsNr; i++) {
const day = getRandomInt(1, daysInMonth + 1)
const resource = getRandomInt(1, resourceNr + 1)
const color = getRandomInt(0, myEventColors.length)
const startHour = getRandomInt(0, 23)
const startMinute = getRandomInt(0, 4) * 15
const start = new Date(year, month, day, startHour, startMinute)
const end = new Date(start.getTime() + getRandomInt(2, 9) * 15 * 60 * 1000)
if (end.getDate() === start.getDate()) {
newEvents.push({
color: myEventColors[color],
end: end,
resource: resource,
start: start,
title: 'Event ' + i
})
}
}
myEvents.value = newEvents
})
}
</script>
<template>
<MbscEventcalendar :clickToCreate="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete=""
:view="myView"
:data="myEvents"
:resources="myResources"
groupBy="date"
@page-loading="handlePageLoading"
/>
</template>
<style>
/* code */
</style><script setup lang="ts">
import { MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import type {
MbscCalendarEvent,
MbscEventcalendarView,
MbscPageLoadingEvent,
MbscResource
} from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const myEvents = ref<MbscCalendarEvent[]>([])
const myView: MbscEventcalendarView = {
scheduler: {
type: 'month',
timeCellStep: 15,
timeLabelStep: 15
}
}
const resourceNr: number = 20
const eventsNr: number = 2000
const myResources: MbscResource[] = []
const myEventColors: any = ['#ff0101', '#239a21', '#8f1ed6', '#01adff', '#d8ca1a']
for (let i = 1; i <= resourceNr; i++) {
myResources.push({ name: 'Resource ' + i, id: i })
}
function getRandomInt(min: number, max: number) {
return Math.floor(Math.random() * (max - min) + min)
}
function handlePageLoading(args: MbscPageLoadingEvent) {
setTimeout(() => {
const newEvents: MbscCalendarEvent[] = []
const year = args.firstDay.getFullYear()
const month = args.firstDay.getMonth()
const daysInMonth = new Date(year, month + 1, 0).getDate()
// Generate random events for the visible month
for (let i = 0; i < eventsNr; i++) {
const day = getRandomInt(1, daysInMonth + 1)
const resource = getRandomInt(1, resourceNr + 1)
const color = getRandomInt(0, myEventColors.length)
const startHour = getRandomInt(0, 23)
const startMinute = getRandomInt(0, 4) * 15
const start = new Date(year, month, day, startHour, startMinute)
const end = new Date(start.getTime() + getRandomInt(2, 9) * 15 * 60 * 1000)
if (end.getDate() === start.getDate()) {
newEvents.push({
color: myEventColors[color],
end: end,
resource: resource,
start: start,
title: 'Event ' + i
})
}
}
myEvents.value = newEvents
})
}
</script>
<template>
<MbscEventcalendar :clickToCreate="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete=""
:view="myView"
:data="myEvents"
:resources="myResources"
groupBy="date"
@page-loading="handlePageLoading"
/>
</template>
<style>
/* code */
</style>