Theme Customization
The look and feel of the agenda can be deeply customized. There are four levels of customization:
- Base themes: Choose between
Mobiscroll,iOS,Android MaterialandWindows. - 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
<mbsc-eventcalendar
theme="ios "
themeVariant="light " >
</mbsc-eventcalendar>
ComponentTemplateCSS
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MbscCalendarEvent, MbscEventcalendarView, MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
locale:
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent implements OnInit {
constructor(private http: HttpClient) {}
myEvents: MbscCalendarEvent[] = [];
myView: MbscEventcalendarView = { agenda: { type: 'month' } };
theme = 'auto';
themeVariant: 'auto' | 'light' | 'dark' = 'auto';
ngOnInit(): void {
this.http.jsonp<MbscCalendarEvent[]>('https://trial.mobiscroll.com/events/?vers=5', 'callback').subscribe((resp) => {
this.myEvents = resp;
});
}
}
<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">
<mbsc-dropdown [(ngModel)]="theme" inputStyle="box" label="Theme" labelStyle="stacked">
<option value="auto">Auto</option>
<option value="ios">iOS</option>
<option value="material">Material</option>
<option value="windows">Windows</option>
</mbsc-dropdown>
</div>
<div class="mbsc-col-sm-6">
<mbsc-dropdown [(ngModel)]="themeVariant" inputStyle="box" label="Theme variant" labelStyle="stacked">
<option value="auto">Auto</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</mbsc-dropdown>
</div>
</div>
</div>
<div class="mds-overflow-hidden mbsc-flex-1-1">
<mbsc-eventcalendar [data]="myEvents" [view]="myView" [theme]="theme" [themeVariant]="themeVariant"></mbsc-eventcalendar>
</div>
</div>
</mbsc-page>
.mds-full-height {
height: 100%;
}
.mds-overflow-hidden {
overflow: hidden;
}