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
theme: 'ios ',
themeVariant: 'light ' 
JSHTMLCSS
mobiscroll.setOptions({
locale:
});
var inst = mobiscroll.eventcalendar('#demo-theme', {
view: {
scheduler: { type: 'week' },
},
});
document.getElementById('demo-theme-select').addEventListener('change', function (ev) {
inst.setOptions({ theme: ev.target.value });
});
document.getElementById('demo-theme-variant-select').addEventListener('change', function (ev) {
inst.setOptions({ themeVariant: ev.target.value });
});
mobiscroll.getJson(
'https://trial.mobiscroll.com/events/?vers=5',
function (events) {
inst.setEvents(events);
},
'jsonp',
);
<div mbsc-page class="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">
<label>
<select id="demo-theme-select" mbsc-dropdown data-input-style="box" label="Theme" data-label-style="stacked">
<option value="auto">Auto</option>
<option value="ios">iOS</option>
<option value="material">Material</option>
<option value="windows">Windows</option>
</select>
</label>
</div>
<div class="mbsc-col-sm-6">
<label>
<select id="demo-theme-variant-select" mbsc-dropdown data-input-style="box" label="Theme variant" data-label-style="stacked">
<option value="auto">Auto</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</label>
</div>
</div>
</div>
<div id="demo-theme" class="mbsc-flex-1-1"></div>
</div>
</div>
.mds-full-height {
height: 100%;
}