Header and Footer Template
The headers hold key information like the date, day of the week and in some cases it also holds the full date. Whenever you need to show extra information, or if you would like to change the styling or date format, time format you can use the various header templates, depending on the view configuration. You can also show a footer element, for displaying more information.
Add summaries, statistics or simply color the background depending on the number events that occur on that specific day, like in this example.
Check out how you can customize the date header for the scheduler Let's go →
Demo
Hourly header/footer template
With an hourly (or sub-hourly) resolution the
hour and hourFooter options can be used for customizing the header and footer.
<script setup>
const hourView = {
timeline: {
type: 'day'
}
}
function getOccuppancy(events) {
let occuppancy = 0
if (events) {
var resourceIds = []
var nr = 0
for (const event of events) {
if (resourceIds.indexOf(event.resource) < 0) {
nr++
resourceIds = [...resourceIds, event.resource]
}
}
occuppancy = ((nr * 100) / this.myResources.length).toFixed(0)
}
return occuppancy
}
function getEventOccurrence(args) {
let eventOccurrence = 'none'
if (args.events) {
var eventNr = args.events.length
if (eventNr === 0) {
eventOccurrence = 'none'
} else if (eventNr === 1) {
eventOccurrence = 'one'
} else if (eventNr < 4) {
eventOccurrence = 'few'
} else {
eventOccurrence = 'more'
}
}
return eventOccurrence
}
</script>
<template>
<MbscEventcalendar :view="hourView">
<template #hour="day">
<div :class="'md-date-header-hour md-date-header-events-' + getEventOccurrence(day)">
{{ formatDate('h:mm A', day.date) }}
</div>
</template>
<template #hourFooter="day">
<div class="md-date-footer">{{ getOccuppancy(day.events) }}</div>
</template>
</MbscEventcalendar>
</template>css.md-date-header-hour {
font-size: 12px;
font-weight: 600;
text-align: center;
line-height: 20px;
border-radius: 8px;
margin: 3px;
color: #000;
}
.md-date-header-events-one {
background: #e9f5e4;
}
.md-date-header-events-few {
background: #d0e3c6;
}
.md-date-header-events-more {
background: #8ca77e;
}
.md-date-footer {
font-size: 14px;
font-weight: 600;
text-align: center;
line-height: 26px;
}
Daily header/footer template
With a daily resolution, the
timelineDay and dayFooter options can come in handy for customizing the header and footer.
<script setup>
const dayView = {
timeline: {
type: 'month'
}
}
function getOccuppancy(events) {
let occuppancy = 0
if (events) {
var resourceIds = []
var nr = 0
for (const event of events) {
if (resourceIds.indexOf(event.resource) < 0) {
nr++
resourceIds = [...resourceIds, event.resource]
}
}
occuppancy = ((nr * 100) / this.myResources.length).toFixed(0)
}
return occuppancy
}
function getEventOccurrence(args) {
let eventOccurrence = 'none'
if (args.events) {
var eventNr = args.events.length
if (eventNr === 0) {
eventOccurrence = 'none'
} else if (eventNr === 1) {
eventOccurrence = 'one'
} else if (eventNr < 4) {
eventOccurrence = 'few'
} else {
eventOccurrence = 'more'
}
}
return eventOccurrence
}
</script>
<template>
<MbscEventcalendar :view="dayView">
<template #timelineDay="day">
<div :class="'md-date-header-day md-date-header-events-' + getEventOccurrence(day)">
<div class="md-date-header-day-name">{{ formatDate('DDD', day.date) }}</div>
<div class="md-date-header-day-nr">{{ formatDate('DD', day.date) }}</div>
</div>
</template>
<template #dayFooter="day">
<div class="md-date-footer">{{ getOccuppancy(day.events) }}</div>
</template>
</MbscEventcalendar>
</template>css.md-date-header-day {
text-align: center;
line-height: 20px;
border-radius: 8px;
margin: 4px;
}
.md-date-header-day-name {
font-size: 13px;
font-weight: 600;
}
.md-date-header-day-nr {
font-size: 14px;
}
.md-date-header-events-one {
background: #e9f5e4;
}
.md-date-header-events-few {
background: #d0e3c6;
}
.md-date-header-events-more {
background: #8ca77e;
}
.md-date-footer {
font-size: 14px;
font-weight: 600;
text-align: center;
line-height: 26px;
}
Weekly header/footer template
When the resolution is weekly, the
week and weekFooter options can be used.
<script setup>
const weekView = {
timeline: {
type: 'week',
resolutionHorizontal: 'week',
size: 6
}
}
function getOccuppancy(events) {
let occuppancy = 0
if (events) {
var resourceIds = []
var nr = 0
for (const event of events) {
if (resourceIds.indexOf(event.resource) < 0) {
nr++
resourceIds = [...resourceIds, event.resource]
}
}
occuppancy = ((nr * 100) / this.myResources.length).toFixed(0)
}
return occuppancy
}
function getEventOccurrence(args) {
let eventOccurrence = 'none'
if (args.events) {
var eventNr = args.events.length
if (eventNr === 0) {
eventOccurrence = 'none'
} else if (eventNr === 1) {
eventOccurrence = 'one'
} else if (eventNr < 4) {
eventOccurrence = 'few'
} else {
eventOccurrence = 'more'
}
}
return eventOccurrence
}
</script>
<template>
<MbscEventcalendar :view="weekView">
<template #week="day">
<div :class="'md-date-header-week md-date-header-events-' + getEventOccurrence(day)">
{{ formatDate('MMM DD', day.date) }}
</div>
</template>
<template #weekFooter="day">
<div class="md-date-footer">{{ getOccuppancy(day.events) }}</div>
</template>
</MbscEventcalendar>
</template>css.md-date-header-template .mbsc-timeline-header-week-text {
display: block;
}
.md-date-header-template .mbsc-timeline-footer-week {
text-align: center;
}
.md-date-header-week {
text-align: center;
font-weight: 600;
color: initial;
line-height: 20px;
border-radius: 8px;
margin: 3px;
}
.md-date-header-events-one {
background: #e9f5e4;
}
.md-date-header-events-few {
background: #d0e3c6;
}
.md-date-header-events-more {
background: #8ca77e;
}
.md-date-footer {
font-size: 14px;
font-weight: 600;
text-align: center;
line-height: 26px;
}
Monthly header/footer template
When displaying multiple months, the
month and monthFooter options can be used for customizing the header and footer per month.
<script setup>
const monthView = {
timeline: {
type: 'month',
resolutionHorizontal: 'month',
size: 6
}
}
function getOccuppancy(events) {
let occuppancy = 0
if (events) {
var resourceIds = []
var nr = 0
for (const event of events) {
if (resourceIds.indexOf(event.resource) < 0) {
nr++
resourceIds = [...resourceIds, event.resource]
}
}
occuppancy = ((nr * 100) / this.myResources.length).toFixed(0)
}
return occuppancy
}
function getEventOccurrence(args) {
let eventOccurrence = 'none'
if (args.events) {
var eventNr = args.events.length
if (eventNr === 0) {
eventOccurrence = 'none'
} else if (eventNr === 1) {
eventOccurrence = 'one'
} else if (eventNr < 4) {
eventOccurrence = 'few'
} else {
eventOccurrence = 'more'
}
}
return eventOccurrence
}
</script>
<template>
<MbscEventcalendar :view="monthView">
<template #month="day">
<div :class=" 'md-date-header-month md-date-header-events-' + getEventOccurrence(day)">
{{ formatDate('MMM', day.startDate) + ' - ' + formatDate('MMM', day.endDate) }}
</div>
</template>
<template #monthFooter="day">
<div class="md-date-footer">{{ getOccuppancy(day.events) }}</div>
</template>
</MbscEventcalendar>
</template>css.md-date-header-month {
text-align: center;
font-weight: 600;
color: initial;
line-height: 20px;
border-radius: 8px;
margin: 3px;
}
.md-date-header-events-one {
background: #e9f5e4;
}
.md-date-header-events-few {
background: #d0e3c6;
}
.md-date-header-events-more {
background: #8ca77e;
}
.md-date-footer {
font-size: 14px;
font-weight: 600;
text-align: center;
line-height: 26px;
}
Quarter header/footer template
When displaying multiple quarters, the
quarter and quarterFooter options can be used for customizing the header and footer per quarter.
<script setup>
const quarterView = {
timeline: {
type: 'year',
resolutionHorizontal: 'quarter',
size: 1
}
}
function getOccuppancy(events) {
let occuppancy = 0
if (events) {
var resourceIds = []
var nr = 0
for (const event of events) {
if (resourceIds.indexOf(event.resource) < 0) {
nr++
resourceIds = [...resourceIds, event.resource]
}
}
occuppancy = ((nr * 100) / this.myResources.length).toFixed(0)
}
return occuppancy
}
function getEventOccurrence(args) {
let eventOccurrence = 'none'
if (args.events) {
var eventNr = args.events.length
if (eventNr === 0) {
eventOccurrence = 'none'
} else if (eventNr === 1) {
eventOccurrence = 'one'
} else if (eventNr < 4) {
eventOccurrence = 'few'
} else {
eventOccurrence = 'more'
}
}
return eventOccurrence
}
</script>
<template>
<MbscEventcalendar :view="quarterView">
<template #quarter="day">
<div :class=" 'md-date-header-quarter md-date-header-events-' + getEventOccurrence(day)">
Quarter {{ (day.date.getMonth() / 3 + 1) }}
</div>
</template>
<template #quarterFooter="day">
<div class="md-date-footer">{{ getOccuppancy(day.events) }}</div>
</template>
</MbscEventcalendar>
</template>css.md-date-header-quarter {
text-align: center;
font-weight: 600;
color: initial;
line-height: 20px;
border-radius: 8px;
margin: 3px;
}
.md-date-header-events-one {
background: #e9f5e4;
}
.md-date-header-events-few {
background: #d0e3c6;
}
.md-date-header-events-more {
background: #8ca77e;
}
.md-date-footer {
font-size: 14px;
font-weight: 600;
text-align: center;
line-height: 26px;
}
Yearly header/footer template
With a yearly resolution, the
year and yearFooter options can be used for customizing the header and footer.
<script setup>
const yearView = {
timeline: {
type: 'year',
resolutionHorizontal: 'year',
size: 6
}
}
function getOccuppancy(events) {
let occuppancy = 0
if (events) {
var resourceIds = []
var nr = 0
for (const event of events) {
if (resourceIds.indexOf(event.resource) < 0) {
nr++
resourceIds = [...resourceIds, event.resource]
}
}
occuppancy = ((nr * 100) / this.myResources.length).toFixed(0)
}
return occuppancy
}
function getEventOccurrence(args) {
let eventOccurrence = 'none'
if (args.events) {
var eventNr = args.events.length
if (eventNr === 0) {
eventOccurrence = 'none'
} else if (eventNr === 1) {
eventOccurrence = 'one'
} else if (eventNr < 4) {
eventOccurrence = 'few'
} else {
eventOccurrence = 'more'
}
}
return eventOccurrence
}
</script>
<template>
<MbscEventcalendar :view="yearView">
<template #year="day">
<div :class="'md-date-header-year md-date-header-events-' + getEventOccurrence(day)">
{{ formatDate('YYYY', day.date) }}
</div>
</template>
<template #yearFooter="day">
<div class="md-date-footer">{{ getOccuppancy(day.events) }}</div>
</template>
</MbscEventcalendar>
</template>css.md-date-header-year {
text-align: center;
font-weight: 600;
color: initial;
line-height: 20px;
border-radius: 8px;
margin: 3px;
}
.md-date-header-events-one {
background: #e9f5e4;
}
.md-date-header-events-few {
background: #d0e3c6;
}
.md-date-header-events-more {
background: #8ca77e;
}
.md-date-footer {
font-size: 14px;
font-weight: 600;
text-align: center;
line-height: 26px;
}
SFC JSSFC TS
<script setup>
import { formatDate, MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const myHourView = {
timeline: {
type: 'day'
}
}
const hourlyEvents = ref([
{
id: 1,
start: '2026-10-31T02:00',
end: '2026-10-31T10:00',
title: 'Event 1',
resource: 1
},
{
id: 2,
start: '2026-10-31T15:00',
end: '2026-10-31T21:00',
title: 'Event 2',
resource: 1
},
{
id: 3,
start: '2026-10-31T08:00',
end: '2026-10-31T15:00',
title: 'Event 3',
resource: 2
},
{
id: 4,
start: '2026-10-31T05:00',
end: '2026-10-31T13:00',
title: 'Event 4',
resource: 3
},
{
id: 5,
start: '2026-10-31T03:00',
end: '2026-10-31T10:00',
title: 'Event 5',
resource: 4
},
{
id: 6,
start: '2026-10-31T16:00',
end: '2026-10-31T23:00',
title: 'Event 6',
resource: 4
},
{
id: 7,
start: '2026-10-31T06:00',
end: '2026-10-31T11:00',
title: 'Event 7',
resource: 5
},
{
id: 8,
start: '2026-10-31T15:00',
end: '2026-10-31T22:00',
title: 'Event 8',
resource: 5
},
{
id: 9,
start: '2026-10-31T08:00',
end: '2026-10-31T17:00',
title: 'Event 9',
resource: 6
},
{
id: 10,
start: '2026-10-31T05:00',
end: '2026-10-31T13:00',
title: 'Event 10',
resource: 7
},
{
id: 11,
start: '2026-10-31T16:00',
end: '2026-10-31T21:00',
title: 'Event 11',
resource: 7
},
{
id: 12,
start: '2026-10-31T09:00',
end: '2026-10-31T18:00',
title: 'Event 12',
resource: 8
}
])
const myDayView = {
timeline: {
type: 'month'
}
}
const dailyEvents = ref([
{
id: 1,
start: '2026-10-02T00:00',
end: '2026-10-10T00:00',
title: 'Event 1',
resource: 1
},
{
id: 2,
start: '2026-10-16T00:00',
end: '2026-10-24T00:00',
title: 'Event 2',
resource: 1
},
{
id: 3,
start: '2026-10-08T00:00',
end: '2026-10-15T00:00',
title: 'Event 3',
resource: 2
},
{
id: 4,
start: '2026-10-04T00:00',
end: '2026-10-11T00:00',
title: 'Event 4',
resource: 3
},
{
id: 5,
start: '2026-10-07T00:00',
end: '2026-10-15T00:00',
title: 'Event 5',
resource: 4
},
{
id: 6,
start: '2026-10-21T00:00',
end: '2026-10-27T00:00',
title: 'Event 6',
resource: 4
},
{
id: 7,
start: '2026-10-10T00:00',
end: '2026-10-19T00:00',
title: 'Event 7',
resource: 5
},
{
id: 8,
start: '2026-10-24T00:00',
end: '2026-10-30T00:00',
title: 'Event 8',
resource: 5
},
{
id: 9,
start: '2026-10-08T00:00',
end: '2026-10-17T00:00',
title: 'Event 9',
resource: 6
},
{
id: 10,
start: '2026-10-05T00:00',
end: '2026-10-13T00:00',
title: 'Event 10',
resource: 7
},
{
id: 11,
start: '2026-10-17T00:00',
end: '2026-10-26T00:00',
title: 'Event 11',
resource: 7
},
{
id: 12,
start: '2026-10-09T00:00',
end: '2026-10-20T00:00',
title: 'Event 12',
resource: 8
}
])
const myWeekView = {
timeline: {
type: 'week',
resolutionHorizontal: 'week',
size: 6
}
}
const weeklyEvents = ref([
{
id: 1,
start: '2026-10-10T00:00',
end: '2026-10-24T00:00',
title: 'Event 1',
resource: 1
},
{
id: 2,
start: '2026-11-02T00:00',
end: '2026-11-18T00:00',
title: 'Event 2',
resource: 1
},
{
id: 3,
start: '2026-10-27T00:00',
end: '2026-11-13T00:00',
title: 'Event 3',
resource: 2
},
{
id: 4,
start: '2026-11-04T00:00',
end: '2026-11-27T00:00',
title: 'Event 4',
resource: 3
},
{
id: 5,
start: '2026-10-24T00:00',
end: '2026-11-02T00:00',
title: 'Event 5',
resource: 4
},
{
id: 6,
start: '2026-11-10T00:00',
end: '2026-11-24T00:00',
title: 'Event 6',
resource: 4
},
{
id: 7,
start: '2026-10-20T00:00',
end: '2026-11-03T00:00',
title: 'Event 7',
resource: 5
},
{
id: 8,
start: '2026-11-08T00:00',
end: '2026-11-19T00:00',
title: 'Event 8',
resource: 5
},
{
id: 9,
start: '2026-10-28T00:00',
end: '2026-11-15T00:00',
title: 'Event 9',
resource: 6
},
{
id: 10,
start: '2026-10-09T00:00',
end: '2026-10-23T00:00',
title: 'Event 10',
resource: 7
},
{
id: 11,
start: '2026-11-05T00:00',
end: '2026-11-22T00:00',
title: 'Event 11',
resource: 7
},
{
id: 12,
start: '2026-10-24T00:00',
end: '2026-11-13T00:00',
title: 'Event 12',
resource: 8
}
])
const myMonthView = {
timeline: {
type: 'month',
resolutionHorizontal: 'month',
size: 6
}
}
const monthlyEvents = ref([
{
id: 1,
start: '2026-09-10T00:00',
end: '2026-11-07T00:00',
title: 'Event 1',
resource: 1
},
{
id: 2,
start: '2027-01-01T00:00',
end: '2027-02-08T00:00',
title: 'Event 2',
resource: 1
},
{
id: 3,
start: '2026-11-27T00:00',
end: '2026-12-23T00:00',
title: 'Event 3',
resource: 2
},
{
id: 4,
start: '2026-10-25T00:00',
end: '2026-11-19T00:00',
title: 'Event 4',
resource: 3
},
{
id: 5,
start: '2026-11-10T00:00',
end: '2026-12-18T00:00',
title: 'Event 5',
resource: 4
},
{
id: 6,
start: '2027-02-24T00:00',
end: '2027-03-27T00:00',
title: 'Event 6',
resource: 4
},
{
id: 7,
start: '2026-12-02T00:00',
end: '2027-01-13T00:00',
title: 'Event 7',
resource: 5
},
{
id: 8,
start: '2027-02-08T00:00',
end: '2027-03-06T00:00',
title: 'Event 8',
resource: 5
},
{
id: 9,
start: '2026-12-20T00:00',
end: '2027-01-17T00:00',
title: 'Event 9',
resource: 6
},
{
id: 10,
start: '2026-10-01T00:00',
end: '2026-11-14T00:00',
title: 'Event 10',
resource: 7
},
{
id: 11,
start: '2027-02-14T00:00',
end: '2027-03-20T00:00',
title: 'Event 11',
resource: 7
},
{
id: 12,
start: '2026-11-24T00:00',
end: '2026-12-20T00:00',
title: 'Event 12',
resource: 8
}
])
const myQuarterView = {
timeline: {
type: 'year',
resolutionHorizontal: 'quarter',
size: 1
}
}
const quarterEvents = ref([
{
id: 1,
start: '2026-09-10T00:00',
end: '2026-11-07T00:00',
title: 'Event 1',
resource: 1
},
{
id: 2,
start: '2027-01-01T00:00',
end: '2027-02-08T00:00',
title: 'Event 2',
resource: 1
},
{
id: 3,
start: '2026-11-27T00:00',
end: '2026-12-23T00:00',
title: 'Event 3',
resource: 2
},
{
id: 4,
start: '2026-10-25T00:00',
end: '2026-11-19T00:00',
title: 'Event 4',
resource: 3
},
{
id: 5,
start: '2026-11-10T00:00',
end: '2026-12-18T00:00',
title: 'Event 5',
resource: 4
},
{
id: 6,
start: '2027-02-24T00:00',
end: '2027-03-27T00:00',
title: 'Event 6',
resource: 4
},
{
id: 7,
start: '2026-12-02T00:00',
end: '2027-01-13T00:00',
title: 'Event 7',
resource: 5
},
{
id: 8,
start: '2027-02-08T00:00',
end: '2027-03-06T00:00',
title: 'Event 8',
resource: 5
},
{
id: 9,
start: '2026-12-20T00:00',
end: '2027-01-17T00:00',
title: 'Event 9',
resource: 6
},
{
id: 10,
start: '2026-10-01T00:00',
end: '2026-11-14T00:00',
title: 'Event 10',
resource: 7
},
{
id: 11,
start: '2027-02-14T00:00',
end: '2027-03-20T00:00',
title: 'Event 11',
resource: 7
},
{
id: 12,
start: '2026-11-24T00:00',
end: '2026-12-20T00:00',
title: 'Event 12',
resource: 8
}
])
const myYearView = {
timeline: {
type: 'year',
resolutionHorizontal: 'year',
size: 6
}
}
const yearlyEvents = ref([
{
id: 1,
start: '2027-04-10T00:00',
end: '2028-08-07T00:00',
title: 'Event 1',
resource: 1
},
{
id: 2,
start: '2029-06-01T00:00',
end: '2030-09-08T00:00',
title: 'Event 2',
resource: 1
},
{
id: 3,
start: '2028-03-27T00:00',
end: '2029-10-23T00:00',
title: 'Event 3',
resource: 2
},
{
id: 4,
start: '2028-08-25T00:00',
end: '2029-11-19T00:00',
title: 'Event 4',
resource: 3
},
{
id: 5,
start: '2027-09-10T00:00',
end: '2029-04-18T00:00',
title: 'Event 5',
resource: 4
},
{
id: 6,
start: '2030-01-24T00:00',
end: '2031-05-27T00:00',
title: 'Event 6',
resource: 4
},
{
id: 7,
start: '2025-04-02T00:00',
end: '2026-08-13T00:00',
title: 'Event 7',
resource: 5
},
{
id: 8,
start: '2028-04-08T00:00',
end: '2029-11-06T00:00',
title: 'Event 8',
resource: 5
},
{
id: 9,
start: '2028-01-20T00:00',
end: '2029-08-17T00:00',
title: 'Event 9',
resource: 6
},
{
id: 10,
start: '2026-10-01T00:00',
end: '2027-11-14T00:00',
title: 'Event 10',
resource: 7
},
{
id: 11,
start: '2029-10-14T00:00',
end: '2030-11-20T00:00',
title: 'Event 11',
resource: 7
},
{
id: 12,
start: '2029-02-24T00:00',
end: '2031-04-20T00:00',
title: 'Event 12',
resource: 8
}
])
const myResources = [
{
id: 1,
name: 'Resource A',
color: '#e20000'
},
{
id: 2,
name: 'Resource B',
color: '#d6d145'
},
{
id: 3,
name: 'Resource C',
color: '#4981d6'
},
{
id: 4,
name: 'Resource D',
color: '#e25dd2'
},
{
id: 5,
name: 'Resource E',
color: '#1dab2f'
},
{
id: 6,
name: 'Resource F',
color: '#430404'
},
{
id: 7,
name: 'Resource G',
color: '#f7961e'
},
{
id: 8,
name: 'Resource H',
color: '#34c8e0'
}
]
function getOccuppancy(events) {
let occuppancy = 0
if (events) {
let resourceIds = []
let nr = 0
for (const event of events) {
if (resourceIds.indexOf(event.resource) < 0) {
nr++
resourceIds = [...resourceIds, event.resource]
}
}
occuppancy = (nr * 100) / myResources.length
}
return occuppancy.toFixed(0)
}
function getEventOccurrence(args) {
let eventOccurrence = 'none'
if (args.events) {
const eventNr = args.events.length
if (eventNr === 0) {
eventOccurrence = 'none'
} else if (eventNr === 1) {
eventOccurrence = 'one'
} else if (eventNr < 4) {
eventOccurrence = 'few'
} else {
eventOccurrence = 'more'
}
}
return eventOccurrence
}
</script>
<template>
<div class="md-date-header-template">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Hourly header template</div>
<MbscEventcalendar :view="myHourView" :data="hourlyEvents" :resources="myResources">
<template #hour="day">
<div
:class="
'md-date-header md-date-header-hour md-date-header-events-' + getEventOccurrence(day)
"
>
{{ formatDate('h:mm A', day.date) }}
</div>
</template>
<template #hourFooter="day">
<div class="md-date-footer">{{ getOccuppancy(day.events) }}</div>
</template>
</MbscEventcalendar>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Daily header template</div>
<MbscEventcalendar :view="myDayView" :data="dailyEvents" :resources="myResources">
<template #timelineDay="day">
<div
:class="
'md-date-header md-date-header-day md-date-header-events-' + getEventOccurrence(day)
"
>
<div class="md-date-header-day-name">{{ formatDate('DDD', day.date) }}</div>
<div class="md-date-header-day-nr">{{ formatDate('DD', day.date) }}</div>
</div>
</template>
<template #dayFooter="day">
<div class="md-date-footer">{{ getOccuppancy(day.events) }}</div>
</template>
</MbscEventcalendar>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Weekly header template</div>
<MbscEventcalendar :view="myWeekView" :data="weeklyEvents" :resources="myResources">
<template #week="day">
<div
:class="
'md-date-header md-date-header-week md-date-header-events-' + getEventOccurrence(day)
"
>
{{ formatDate('MMM DD', day.date) }}
</div>
</template>
<template #weekFooter="day">
<div class="md-date-footer">{{ getOccuppancy(day.events) }}</div>
</template>
</MbscEventcalendar>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Monthly header template</div>
<MbscEventcalendar :view="myMonthView" :data="monthlyEvents" :resources="myResources">
<template #month="day">
<div
:class="
'md-date-header md-date-header-month md-date-header-events-' + getEventOccurrence(day)
"
>
{{ formatDate('MMM', day.startDate) + ' - ' + formatDate('MMM', day.endDate) }}
</div>
</template>
<template #monthFooter="day">
<div class="md-date-footer">{{ getOccuppancy(day.events) }}</div>
</template>
</MbscEventcalendar>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Quarter header template</div>
<MbscEventcalendar :view="myQuarterView" :data="quarterEvents" :resources="myResources">
<template #quarter="day">
<div
:class="
'md-date-header md-date-header-quarter md-date-header-events-' +
getEventOccurrence(day)
"
>
Quarter {{ day.date.getMonth() / 3 + 1 }}
</div>
</template>
<template #quarterFooter="day">
<div class="md-date-footer">{{ getOccuppancy(day.events) }}</div>
</template>
</MbscEventcalendar>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Yearly header template</div>
<MbscEventcalendar :view="myYearView" :data="yearlyEvents" :resources="myResources">
<template #year="day">
<div
:class="
'md-date-header md-date-header-year md-date-header-events-' + getEventOccurrence(day)
"
>
{{ formatDate('YYYY', day.date) }}
</div>
</template>
<template #yearFooter="day">
<div class="md-date-footer">{{ getOccuppancy(day.events) }}</div>
</template>
</MbscEventcalendar>
</div>
</div>
</template>
<style>
.md-date-header-template .mbsc-timeline-header-week-text {
display: block;
}
.md-date-header {
text-align: center;
border-radius: 8px;
line-height: 20px;
}
.md-date-header-day {
padding: 3px;
margin: 4px;
}
.md-date-header-hour {
font-size: 12px;
padding: 0;
margin: 3px;
color: #000;
font-weight: 600;
}
.md-date-header-week,
.md-date-header-month,
.md-date-header-quarter,
.md-date-header-year {
padding: 0 8px;
margin: 3px;
color: initial;
font-weight: 600;
}
.md-date-header-template .mbsc-timeline-footer-week {
text-align: center;
}
.md-date-header-day-name {
font-size: 13px;
font-weight: 600;
}
.md-date-header-day-nr {
font-size: 14px;
}
.md-date-header-events-one {
background: #e9f5e4;
}
.md-date-header-events-few {
background: #d0e3c6;
}
.md-date-header-events-more {
background: #8ca77e;
}
.md-date-footer {
font-size: 14px;
font-weight: 600;
text-align: center;
line-height: 26px;
}
</style><script setup lang="ts">
import { formatDate, MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import type { MbscCalendarEvent, MbscEventcalendarView, MbscResource } from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const myHourView: MbscEventcalendarView = {
timeline: {
type: 'day'
}
}
const hourlyEvents = ref<MbscCalendarEvent[]>([
{
id: 1,
start: '2026-10-31T02:00',
end: '2026-10-31T10:00',
title: 'Event 1',
resource: 1
},
{
id: 2,
start: '2026-10-31T15:00',
end: '2026-10-31T21:00',
title: 'Event 2',
resource: 1
},
{
id: 3,
start: '2026-10-31T08:00',
end: '2026-10-31T15:00',
title: 'Event 3',
resource: 2
},
{
id: 4,
start: '2026-10-31T05:00',
end: '2026-10-31T13:00',
title: 'Event 4',
resource: 3
},
{
id: 5,
start: '2026-10-31T03:00',
end: '2026-10-31T10:00',
title: 'Event 5',
resource: 4
},
{
id: 6,
start: '2026-10-31T16:00',
end: '2026-10-31T23:00',
title: 'Event 6',
resource: 4
},
{
id: 7,
start: '2026-10-31T06:00',
end: '2026-10-31T11:00',
title: 'Event 7',
resource: 5
},
{
id: 8,
start: '2026-10-31T15:00',
end: '2026-10-31T22:00',
title: 'Event 8',
resource: 5
},
{
id: 9,
start: '2026-10-31T08:00',
end: '2026-10-31T17:00',
title: 'Event 9',
resource: 6
},
{
id: 10,
start: '2026-10-31T05:00',
end: '2026-10-31T13:00',
title: 'Event 10',
resource: 7
},
{
id: 11,
start: '2026-10-31T16:00',
end: '2026-10-31T21:00',
title: 'Event 11',
resource: 7
},
{
id: 12,
start: '2026-10-31T09:00',
end: '2026-10-31T18:00',
title: 'Event 12',
resource: 8
}
])
const myDayView: MbscEventcalendarView = {
timeline: {
type: 'month'
}
}
const dailyEvents = ref<MbscCalendarEvent[]>([
{
id: 1,
start: '2026-10-02T00:00',
end: '2026-10-10T00:00',
title: 'Event 1',
resource: 1
},
{
id: 2,
start: '2026-10-16T00:00',
end: '2026-10-24T00:00',
title: 'Event 2',
resource: 1
},
{
id: 3,
start: '2026-10-08T00:00',
end: '2026-10-15T00:00',
title: 'Event 3',
resource: 2
},
{
id: 4,
start: '2026-10-04T00:00',
end: '2026-10-11T00:00',
title: 'Event 4',
resource: 3
},
{
id: 5,
start: '2026-10-07T00:00',
end: '2026-10-15T00:00',
title: 'Event 5',
resource: 4
},
{
id: 6,
start: '2026-10-21T00:00',
end: '2026-10-27T00:00',
title: 'Event 6',
resource: 4
},
{
id: 7,
start: '2026-10-10T00:00',
end: '2026-10-19T00:00',
title: 'Event 7',
resource: 5
},
{
id: 8,
start: '2026-10-24T00:00',
end: '2026-10-30T00:00',
title: 'Event 8',
resource: 5
},
{
id: 9,
start: '2026-10-08T00:00',
end: '2026-10-17T00:00',
title: 'Event 9',
resource: 6
},
{
id: 10,
start: '2026-10-05T00:00',
end: '2026-10-13T00:00',
title: 'Event 10',
resource: 7
},
{
id: 11,
start: '2026-10-17T00:00',
end: '2026-10-26T00:00',
title: 'Event 11',
resource: 7
},
{
id: 12,
start: '2026-10-09T00:00',
end: '2026-10-20T00:00',
title: 'Event 12',
resource: 8
}
])
const myWeekView: MbscEventcalendarView = {
timeline: {
type: 'week',
resolutionHorizontal: 'week',
size: 6
}
}
const weeklyEvents = ref<MbscCalendarEvent[]>([
{
id: 1,
start: '2026-10-10T00:00',
end: '2026-10-24T00:00',
title: 'Event 1',
resource: 1
},
{
id: 2,
start: '2026-11-02T00:00',
end: '2026-11-18T00:00',
title: 'Event 2',
resource: 1
},
{
id: 3,
start: '2026-10-27T00:00',
end: '2026-11-13T00:00',
title: 'Event 3',
resource: 2
},
{
id: 4,
start: '2026-11-04T00:00',
end: '2026-11-27T00:00',
title: 'Event 4',
resource: 3
},
{
id: 5,
start: '2026-10-24T00:00',
end: '2026-11-02T00:00',
title: 'Event 5',
resource: 4
},
{
id: 6,
start: '2026-11-10T00:00',
end: '2026-11-24T00:00',
title: 'Event 6',
resource: 4
},
{
id: 7,
start: '2026-10-20T00:00',
end: '2026-11-03T00:00',
title: 'Event 7',
resource: 5
},
{
id: 8,
start: '2026-11-08T00:00',
end: '2026-11-19T00:00',
title: 'Event 8',
resource: 5
},
{
id: 9,
start: '2026-10-28T00:00',
end: '2026-11-15T00:00',
title: 'Event 9',
resource: 6
},
{
id: 10,
start: '2026-10-09T00:00',
end: '2026-10-23T00:00',
title: 'Event 10',
resource: 7
},
{
id: 11,
start: '2026-11-05T00:00',
end: '2026-11-22T00:00',
title: 'Event 11',
resource: 7
},
{
id: 12,
start: '2026-10-24T00:00',
end: '2026-11-13T00:00',
title: 'Event 12',
resource: 8
}
])
const myMonthView: MbscEventcalendarView = {
timeline: {
type: 'month',
resolutionHorizontal: 'month',
size: 6
}
}
const monthlyEvents = ref<MbscCalendarEvent[]>([
{
id: 1,
start: '2026-09-10T00:00',
end: '2026-11-07T00:00',
title: 'Event 1',
resource: 1
},
{
id: 2,
start: '2027-01-01T00:00',
end: '2027-02-08T00:00',
title: 'Event 2',
resource: 1
},
{
id: 3,
start: '2026-11-27T00:00',
end: '2026-12-23T00:00',
title: 'Event 3',
resource: 2
},
{
id: 4,
start: '2026-10-25T00:00',
end: '2026-11-19T00:00',
title: 'Event 4',
resource: 3
},
{
id: 5,
start: '2026-11-10T00:00',
end: '2026-12-18T00:00',
title: 'Event 5',
resource: 4
},
{
id: 6,
start: '2027-02-24T00:00',
end: '2027-03-27T00:00',
title: 'Event 6',
resource: 4
},
{
id: 7,
start: '2026-12-02T00:00',
end: '2027-01-13T00:00',
title: 'Event 7',
resource: 5
},
{
id: 8,
start: '2027-02-08T00:00',
end: '2027-03-06T00:00',
title: 'Event 8',
resource: 5
},
{
id: 9,
start: '2026-12-20T00:00',
end: '2027-01-17T00:00',
title: 'Event 9',
resource: 6
},
{
id: 10,
start: '2026-10-01T00:00',
end: '2026-11-14T00:00',
title: 'Event 10',
resource: 7
},
{
id: 11,
start: '2027-02-14T00:00',
end: '2027-03-20T00:00',
title: 'Event 11',
resource: 7
},
{
id: 12,
start: '2026-11-24T00:00',
end: '2026-12-20T00:00',
title: 'Event 12',
resource: 8
}
])
const myQuarterView: MbscEventcalendarView = {
timeline: {
type: 'year',
resolutionHorizontal: 'quarter',
size: 6
}
}
const quarterEvents = ref<MbscCalendarEvent[]>([
{
id: 1,
start: '2026-09-10T00:00',
end: '2026-11-07T00:00',
title: 'Event 1',
resource: 1
},
{
id: 2,
start: '2027-01-01T00:00',
end: '2027-02-08T00:00',
title: 'Event 2',
resource: 1
},
{
id: 3,
start: '2026-11-27T00:00',
end: '2026-12-23T00:00',
title: 'Event 3',
resource: 2
},
{
id: 4,
start: '2026-10-25T00:00',
end: '2026-11-19T00:00',
title: 'Event 4',
resource: 3
},
{
id: 5,
start: '2026-11-10T00:00',
end: '2026-12-18T00:00',
title: 'Event 5',
resource: 4
},
{
id: 6,
start: '2027-02-24T00:00',
end: '2027-03-27T00:00',
title: 'Event 6',
resource: 4
},
{
id: 7,
start: '2026-12-02T00:00',
end: '2027-01-13T00:00',
title: 'Event 7',
resource: 5
},
{
id: 8,
start: '2027-02-08T00:00',
end: '2027-03-06T00:00',
title: 'Event 8',
resource: 5
},
{
id: 9,
start: '2026-12-20T00:00',
end: '2027-01-17T00:00',
title: 'Event 9',
resource: 6
},
{
id: 10,
start: '2026-10-01T00:00',
end: '2026-11-14T00:00',
title: 'Event 10',
resource: 7
},
{
id: 11,
start: '2027-02-14T00:00',
end: '2027-03-20T00:00',
title: 'Event 11',
resource: 7
},
{
id: 12,
start: '2026-11-24T00:00',
end: '2026-12-20T00:00',
title: 'Event 12',
resource: 8
}
])
const myYearView: MbscEventcalendarView = {
timeline: {
type: 'year',
resolutionHorizontal: 'year',
size: 6
}
}
const yearlyEvents = ref<MbscCalendarEvent[]>([
{
id: 1,
start: '2027-04-10T00:00',
end: '2028-08-07T00:00',
title: 'Event 1',
resource: 1
},
{
id: 2,
start: '2029-06-01T00:00',
end: '2030-09-08T00:00',
title: 'Event 2',
resource: 1
},
{
id: 3,
start: '2028-03-27T00:00',
end: '2029-10-23T00:00',
title: 'Event 3',
resource: 2
},
{
id: 4,
start: '2028-08-25T00:00',
end: '2029-11-19T00:00',
title: 'Event 4',
resource: 3
},
{
id: 5,
start: '2027-09-10T00:00',
end: '2029-04-18T00:00',
title: 'Event 5',
resource: 4
},
{
id: 6,
start: '2030-01-24T00:00',
end: '2031-05-27T00:00',
title: 'Event 6',
resource: 4
},
{
id: 7,
start: '2025-04-02T00:00',
end: '2026-08-13T00:00',
title: 'Event 7',
resource: 5
},
{
id: 8,
start: '2028-04-08T00:00',
end: '2029-11-06T00:00',
title: 'Event 8',
resource: 5
},
{
id: 9,
start: '2028-01-20T00:00',
end: '2029-08-17T00:00',
title: 'Event 9',
resource: 6
},
{
id: 10,
start: '2026-10-01T00:00',
end: '2027-11-14T00:00',
title: 'Event 10',
resource: 7
},
{
id: 11,
start: '2029-10-14T00:00',
end: '2030-11-20T00:00',
title: 'Event 11',
resource: 7
},
{
id: 12,
start: '2029-02-24T00:00',
end: '2031-04-20T00:00',
title: 'Event 12',
resource: 8
}
])
const myResources: MbscResource[] = [
{
id: 1,
name: 'Resource A',
color: '#e20000'
},
{
id: 2,
name: 'Resource B',
color: '#d6d145'
},
{
id: 3,
name: 'Resource C',
color: '#4981d6'
},
{
id: 4,
name: 'Resource D',
color: '#e25dd2'
},
{
id: 5,
name: 'Resource E',
color: '#1dab2f'
},
{
id: 6,
name: 'Resource F',
color: '#430404'
},
{
id: 7,
name: 'Resource G',
color: '#f7961e'
},
{
id: 8,
name: 'Resource H',
color: '#34c8e0'
}
]
function getOccuppancy(events: any) {
let occuppancy = 0
if (events) {
let resourceIds: number[] = []
let nr = 0
for (const event of events) {
if (resourceIds.indexOf(event.resource) < 0) {
nr++
resourceIds = [...resourceIds, event.resource]
}
}
occuppancy = (nr * 100) / myResources.length
}
return occuppancy.toFixed(0)
}
function getEventOccurrence(args: any) {
let eventOccurrence = 'none'
if (args.events) {
const eventNr = args.events.length
if (eventNr === 0) {
eventOccurrence = 'none'
} else if (eventNr === 1) {
eventOccurrence = 'one'
} else if (eventNr < 4) {
eventOccurrence = 'few'
} else {
eventOccurrence = 'more'
}
}
return eventOccurrence
}
</script>
<template>
<div class="md-date-header-template">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Hourly header template</div>
<MbscEventcalendar :view="myHourView" :data="hourlyEvents" :resources="myResources">
<template #hour="day">
<div
:class="
'md-date-header md-date-header-hour md-date-header-events-' + getEventOccurrence(day)
"
>
{{ formatDate('h:mm A', day.date) }}
</div>
</template>
<template #hourFooter="day">
<div class="md-date-footer">{{ getOccuppancy(day.events) }}</div>
</template>
</MbscEventcalendar>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Daily header template</div>
<MbscEventcalendar :view="myDayView" :data="dailyEvents" :resources="myResources">
<template #timelineDay="day">
<div
:class="
'md-date-header md-date-header-day md-date-header-events-' + getEventOccurrence(day)
"
>
<div class="md-date-header-day-name">{{ formatDate('DDD', day.date) }}</div>
<div class="md-date-header-day-nr">{{ formatDate('DD', day.date) }}</div>
</div>
</template>
<template #dayFooter="day">
<div class="md-date-footer">{{ getOccuppancy(day.events) }}</div>
</template>
</MbscEventcalendar>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Weekly header template</div>
<MbscEventcalendar :view="myWeekView" :data="weeklyEvents" :resources="myResources">
<template #week="day">
<div
:class="
'md-date-header md-date-header-week md-date-header-events-' + getEventOccurrence(day)
"
>
{{ formatDate('MMM DD', day.date) }}
</div>
</template>
<template #weekFooter="day">
<div class="md-date-footer">{{ getOccuppancy(day.events) }}</div>
</template>
</MbscEventcalendar>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Monthly header template</div>
<MbscEventcalendar :view="myMonthView" :data="monthlyEvents" :resources="myResources">
<template #month="day">
<div
:class="
'md-date-header md-date-header-month md-date-header-events-' + getEventOccurrence(day)
"
>
{{ formatDate('MMM', day.startDate) + ' - ' + formatDate('MMM', day.endDate) }}
</div>
</template>
<template #monthFooter="day">
<div class="md-date-footer">{{ getOccuppancy(day.events) }}</div>
</template>
</MbscEventcalendar>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Quarter header template</div>
<MbscEventcalendar :view="myQuarterView" :data="quarterEvents" :resources="myResources">
<template #quarter="day">
<div
:class="
'md-date-header md-date-header-quarter md-date-header-events-' +
getEventOccurrence(day)
"
>
Quarter {{ day.date.getMonth() / 3 + 1 }}
</div>
</template>
<template #quarterFooter="day">
<div class="md-date-footer">{{ getOccuppancy(day.events) }}</div>
</template>
</MbscEventcalendar>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Yearly header template</div>
<MbscEventcalendar :view="myYearView" :data="yearlyEvents" :resources="myResources">
<template #year="day">
<div
:class="
'md-date-header md-date-header-year md-date-header-events-' + getEventOccurrence(day)
"
>
{{ formatDate('YYYY', day.date) }}
</div>
</template>
<template #yearFooter="day">
<div class="md-date-footer">{{ getOccuppancy(day.events) }}</div>
</template>
</MbscEventcalendar>
</div>
</div>
</template>
<style>
.md-date-header-template .mbsc-timeline-header-week-text {
display: block;
}
.md-date-header {
text-align: center;
border-radius: 8px;
line-height: 20px;
}
.md-date-header-day {
padding: 3px;
margin: 4px;
}
.md-date-header-hour {
font-size: 12px;
padding: 0;
margin: 3px;
color: #000;
font-weight: 600;
}
.md-date-header-week,
.md-date-header-month,
.md-date-header-quarter,
.md-date-header-year {
padding: 0 8px;
margin: 3px;
color: initial;
font-weight: 600;
}
.md-date-header-template .mbsc-timeline-footer-week {
text-align: center;
}
.md-date-header-day-name {
font-size: 13px;
font-weight: 600;
}
.md-date-header-day-nr {
font-size: 14px;
}
.md-date-header-events-one {
background: #e9f5e4;
}
.md-date-header-events-few {
background: #d0e3c6;
}
.md-date-header-events-more {
background: #8ca77e;
}
.md-date-footer {
font-size: 14px;
font-weight: 600;
text-align: center;
line-height: 26px;
}
</style>