Themes — iOS, Material & Windows
The look and feel of the scheduler can be deeply customized. There are four levels of customization:
- Base themes: Choose between iOS, Material and Windows.
- Light or dark: Every theme has a
lightanddarkvariant. Setting thethemeVariantto'auto'will switch based on system settings. - Custom themes: Use the theme builder to customize the colors and make it match your brand.
- Custom CSS: If you need further customization, the sky is the limit with CSS overrides.
You can also see how every example looks by changing the theme from the header.
Demo
Pick a base theme
Then choose between light or dark theme variant
Turn dark theme on
Or build a custom theme based on any base theme
Use the theme builder or Sass to customize themes
<MbscEventcalendar
theme="ios "
themeVariant="light "
/>
SFC JSSFC TS
<script setup>
import {
getJson,
MbscDropdown,
MbscEventcalendar,
MbscPage
} from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'
const myEvents = ref([])
const myTheme = ref('material')
const myThemeVariant = ref('dark')
const myView = { scheduler: { type: 'week' } }
onMounted(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events) => {
myEvents.value = events
},
'jsonp'
)
})
</script>
<template>
<MbscPage cssClass="mds-full-height">
<div class="mds-full-height mbsc-flex-col">
<div class="mbsc-grid">
<div class="mbsc-row">
<div class="mbsc-col-sm-6">
<MbscDropdown inputStyle="box" label="Theme" labelStyle="stacked" v-model="myTheme">
<option value="auto">Auto</option>
<option value="ios">iOS</option>
<option value="material">Material</option>
<option value="windows">Windows</option>
</MbscDropdown>
</div>
<div class="mbsc-col-sm-6">
<MbscDropdown
inputStyle="box"
label="Theme variant"
labelStyle="stacked"
v-model="myThemeVariant"
>
<option value="auto">Auto</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</MbscDropdown>
</div>
</div>
</div>
<div className="mds-overflow-hidden mbsc-flex-1-1">
<MbscEventcalendar
:data="myEvents"
:theme="myTheme"
:themeVariant="myThemeVariant"
:view="myView"
/>
</div>
</div>
</MbscPage>
</template>
<style>
.mds-full-height {
height: 100%;
}
.mds-overflow-hidden {
overflow: hidden;
}
</style><script setup lang="ts">
import {
getJson,
MbscDropdown,
MbscEventcalendar,
MbscPage
} from '@mobiscroll/vue'
import type { MbscCalendarEvent, MbscEventcalendarView } from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'
const myEvents = ref<MbscCalendarEvent[]>([])
const myTheme = ref<string>('material')
const myThemeVariant = ref<'light' | 'dark' | 'auto'>('dark')
const myView: MbscEventcalendarView = { scheduler: { type: 'week' } }
onMounted(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events: MbscCalendarEvent[]) => {
myEvents.value = events
},
'jsonp'
)
})
</script>
<template>
<MbscPage cssClass="mds-full-height">
<div class="mds-full-height mbsc-flex-col">
<div class="mbsc-grid">
<div class="mbsc-row">
<div class="mbsc-col-sm-6">
<MbscDropdown inputStyle="box" label="Theme" labelStyle="stacked" v-model="myTheme">
<option value="auto">Auto</option>
<option value="ios">iOS</option>
<option value="material">Material</option>
<option value="windows">Windows</option>
</MbscDropdown>
</div>
<div class="mbsc-col-sm-6">
<MbscDropdown
inputStyle="box"
label="Theme variant"
labelStyle="stacked"
v-model="myThemeVariant"
>
<option value="auto">Auto</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</MbscDropdown>
</div>
</div>
</div>
<div className="mds-overflow-hidden mbsc-flex-1-1">
<MbscEventcalendar
:data="myEvents"
:theme="myTheme"
:themeVariant="myThemeVariant"
:view="myView"
/>
</div>
</div>
</MbscPage>
</template>
<style>
.mds-full-height {
height: 100%;
}
.mds-overflow-hidden {
overflow: hidden;
}
</style>