Empty State
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
locale: localeEn Selecting the locale loads the localized settings and the translated UI text.
Empty State
Customize the look of the empty state through templating or custom render functions. Give a more purposeful feedback to the user and optionally add further actions to it. The template can be totally custom or dynamic based on any criteria.
Use the agendaEmpty template for putting your custom content together.
Demo
Code
View code on GitHub
<script setup>
import {
MbscButton,
MbscEventcalendar,
MbscToast,
setOptions
} from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const isToastOpen = ref(false)
const myEvents = [
{
title: 'Zumba Class',
start: '2026-10-24T17:00',
end: '2026-10-24T19:00'
},
{
title: 'Silent Party',
start: '2026-10-24T21:00',
end: '2026-10-24T23:00'
},
{
title: 'Garbage Collection',
start: '2026-11-07T15:00',
end: '2026-11-07T17:00'
},
{
title: 'Karaoke Night',
start: '2026-11-07T20:00',
end: '2026-11-07T22:00'
}
]
const myView = {
calendar: { type: 'week' },
agenda: { type: 'week' }
}
</script>
<template>
<MbscEventcalendar :view="myView" :data="myEvents">
<template #agendaEmpty>
<div class="mbsc-align-center mbsc-padding">
<img
class="mds-empty-img"
src="https://img.mobiscroll.com/demos/smart-empty-tin-can.png"
alt="Empty can"
style="width: 150px; margin: 50px 0"
/>
<div class="mbsc-margin mbsc-medium mbsc-italic mbsc-txt-muted">
Looks like this can is empty
</div>
<MbscButton color="primary" variant="outline" @click="isToastOpen = true">
Add something to it
</MbscButton>
<div class="mds-empty-txt mbsc-txt-xs">
Illustration by <a href="https://icons8.com/illustrations/author/zD2oqC8lLBBA"
>Icons 8</a
>
from <a href="https://icons8.com/illustrations">Ouch!</a>
</div>
</div>
</template>
</MbscEventcalendar>
<MbscToast message="Add button clicked" :isOpen="isToastOpen" @close="isToastOpen = false" />
</template>
<style>
.mds-empty-img {
width: 150px;
margin: 50px 0;
}
.mds-empty-txt {
padding-top: 150px;
}
</style><script setup lang="ts">
import {
MbscButton,
MbscEventcalendar,
MbscToast,
setOptions
} from '@mobiscroll/vue'
import type { MbscCalendarEvent, MbscEventcalendarView } from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const isToastOpen = ref(false)
const myEvents: MbscCalendarEvent[] = [
{
title: 'Zumba Class',
start: '2026-10-24T17:00',
end: '2026-10-24T19:00'
},
{
title: 'Silent Party',
start: '2026-10-24T21:00',
end: '2026-10-24T23:00'
},
{
title: 'Garbage Collection',
start: '2026-11-07T15:00',
end: '2026-11-07T17:00'
},
{
title: 'Karaoke Night',
start: '2026-11-07T20:00',
end: '2026-11-07T22:00'
}
]
const myView: MbscEventcalendarView = {
calendar: { type: 'week' },
agenda: { type: 'week' }
}
</script>
<template>
<MbscEventcalendar :view="myView" :data="myEvents">
<template #agendaEmpty>
<div class="mbsc-align-center mbsc-padding">
<img
class="mds-empty-img"
src="https://img.mobiscroll.com/demos/smart-empty-tin-can.png"
alt="Empty can"
style="width: 150px; margin: 50px 0"
/>
<div class="mbsc-margin mbsc-medium mbsc-italic mbsc-txt-muted">
Looks like this can is empty
</div>
<MbscButton color="primary" variant="outline" @click="isToastOpen = true">
Add something to it
</MbscButton>
<div class="mds-empty-txt mbsc-txt-xs">
Illustration by <a href="https://icons8.com/illustrations/author/zD2oqC8lLBBA"
>Icons 8</a
>
from <a href="https://icons8.com/illustrations">Ouch!</a>
</div>
</div>
</template>
</MbscEventcalendar>
<MbscToast message="Add button clicked" :isOpen="isToastOpen" @close="isToastOpen = false" />
</template>
<style>
.mds-empty-img {
width: 150px;
margin: 50px 0;
}
.mds-empty-txt {
padding-top: 150px;
}
</style>