Group by Resource or Date
Resources show up in the header of the calendar as the primary group and below them are the days. This can be switched up through the groupBy option that expects 'resource' or 'day'.
Combined with the day and week-view you can help people quickly find what they are looking for. Learn how to add an integrated segmented control to the header.
Demo
Group by
Calendar view
<script setup>
const myView = {
scheduler: {
type: 'week '
}
}
const myResources = [{
id: 1,
name: 'Ryan',
color: '#f7c4b4'
}, {
id: 2,
name: 'Kate',
color: '#c6f1c9'
}, {
id: 3,
name: 'John',
color: '#e8d0ef'
}]
</script>
<template>
<MbscEventcalendar
groupBy="resource "
:view="myView"
:resources="myResources"
/>
</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 myResources = [
{
id: 1,
name: 'Ryan',
color: '#f7c4b4'
},
{
id: 2,
name: 'Kate',
color: '#c6f1c9'
},
{
id: 3,
name: 'John',
color: '#e8d0ef'
}
]
const myView = {
scheduler: {
type: 'week',
allDay: false,
startDay: 1,
endDay: 5,
startTime: '08:00',
endTime: '17:00'
}
}
onMounted(() => {
getJson(
'https://trial.mobiscroll.com/resource-events/',
(events) => {
myEvents.value = events
},
'jsonp'
)
})
</script>
<template>
<MbscEventcalendar :clickToCreate="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete="" :view="myView" :data="myEvents" :resources="myResources" />
</template>
<script setup lang="ts">
import { getJson, MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import type { MbscCalendarEvent, MbscEventcalendarView, MbscResource } from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const myEvents = ref<MbscCalendarEvent[]>([])
const myResources: MbscResource[] = [
{
id: 1,
name: 'Ryan',
color: '#f7c4b4'
},
{
id: 2,
name: 'Kate',
color: '#c6f1c9'
},
{
id: 3,
name: 'John',
color: '#e8d0ef'
}
]
const myView: MbscEventcalendarView = {
scheduler: {
type: 'week',
allDay: false,
startDay: 1,
endDay: 5,
startTime: '08:00',
endTime: '17:00'
}
}
onMounted(() => {
getJson(
'https://trial.mobiscroll.com/resource-events/',
(events: MbscCalendarEvent[]) => {
myEvents.value = events
},
'jsonp'
)
})
</script>
<template>
<MbscEventcalendar :clickToCreate="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete="" :view="myView" :data="myEvents" :resources="myResources" />
</template>