You can customize how the header of calendar looks and how the components are arranged. Besides that you can also add custom functionality, like a segmented control that lets people switch between week and month view.
Use the headerTemplate option for passing a custom template. There are predefined components - shorthands if you will - that can be used to assemble the header:
- Navigation component -
<mbsc-calendar-nav></mbsc-calendar-nav> - Today button -
<mbsc-calendar-today></mbsc-calendar-today> - Previous month button -
<mbsc-calendar-prev></mbsc-calendar-prev> - Next month button -
<mbsc-calendar-next></mbsc-calendar-next>
Demo
The default header contains the two arrows on the far-right for previous and next months, while the current month indicator with the
mbsc-calendar-nav
component is placed to the far-left.
<mbsc-datepicker
[controls]="['calendar']"
calendarType="week"
[calendarSize]="2">
</mbsc-datepicker>
You can reorder the controls and place the
mbsc-calendar-nav
in the middle with the two arrows -
mbsc-calendar-prev and mbsc-calendar-next
- to the sides.
<mbsc-datepicker
[controls]="['calendar']"
[calendarHeaderTemplate]="calendarHeader">
<ng-template #calendarHeader>
<mbsc-calendar-prev class="custom-prev"></mbsc-calendar-prev>
<mbsc-calendar-nav class="custom-nav"></mbsc-calendar-nav>
<mbsc-calendar-next class="custom-next"></mbsc-calendar-next>
</ng-template>
</mbsc-datepicker>
You can also add a custom component, like a
mbsc-calendar-today
button.
<mbsc-datepicker
[controls]="['calendar']"
[calendarHeaderTemplate]="calendarHeader">
<ng-template #calendarHeader>
<mbsc-calendar-nav></mbsc-calendar-nav>
<div class="custom-buttons">
<mbsc-calendar-prev></mbsc-calendar-prev>
<mbsc-calendar-today></mbsc-calendar-today>
<mbsc-calendar-next></mbsc-calendar-next>
</ng-template>
</mbsc-datepicker>Use a segmented component for creating a view switcher.
Above all that you can give instructions or show the selected {value} in the header
<mbsc-datepicker
[controls]="['calendar']"
calendarType="week"
[calendarSize]="2"
headerText="You selected {value}">
</mbsc-datepicker>import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent {
view = 'week';
calendarType: any = 'week';
changeView(): void {
setTimeout(() => {
switch (this.view) {
case 'week':
this.calendarType = 'week';
break;
case 'month':
this.calendarType = 'month';
break;
}
});
}
}
<mbsc-datepicker [controls]="['calendar']" display="inline" calendarType="week" [calendarSize]="2"></mbsc-datepicker>
<mbsc-datepicker [controls]="['calendar']" display="inline" [calendarHeaderTemplate]="customHeaderTemplate">
<ng-template #customHeaderTemplate>
<mbsc-calendar-prev class="custom-prev"></mbsc-calendar-prev>
<mbsc-calendar-nav class="custom-nav"></mbsc-calendar-nav>
<mbsc-calendar-next class="custom-next"></mbsc-calendar-next>
</ng-template>
</mbsc-datepicker>
<mbsc-datepicker [controls]="['calendar']" display="inline" [calendarHeaderTemplate]="todayHeaderTemplate">
<ng-template #todayHeaderTemplate>
<mbsc-calendar-nav></mbsc-calendar-nav>
<div class="custom-buttons">
<mbsc-calendar-prev></mbsc-calendar-prev>
<mbsc-calendar-today></mbsc-calendar-today>
<mbsc-calendar-next></mbsc-calendar-next>
</div>
</ng-template>
</mbsc-datepicker>
<mbsc-datepicker
[controls]="['calendar']"
display="inline"
[calendarType]="calendarType"
[calendarSize]="2"
[calendarHeaderTemplate]="switchHeaderTemplate"
>
<ng-template #switchHeaderTemplate>
<mbsc-calendar-nav class="custom-view-nav"></mbsc-calendar-nav>
<div class="custom-view">
<mbsc-segmented-group [(ngModel)]="view" (change)="changeView()">
<mbsc-segmented value="week" icon="material-date-range"></mbsc-segmented>
<mbsc-segmented value="month" icon="material-event-note"></mbsc-segmented>
</mbsc-segmented-group>
</div>
<mbsc-calendar-prev></mbsc-calendar-prev>
<mbsc-calendar-next></mbsc-calendar-next>
</ng-template>
</mbsc-datepicker>
<mbsc-datepicker
[controls]="['calendar']"
display="inline"
calendarType="week"
[calendarSize]="2"
headerText="You selected {value}"
></mbsc-datepicker>
.custom-buttons,
.custom-view,
.custom-nav {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-moz-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
.custom-buttons {
-webkit-justify-content: flex-end;
-moz-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.custom-view,
.custom-nav {
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.custom-view-nav .mbsc-calendar-title.mbsc-material {
font-size: 16px;
}
.custom-view .mbsc-segmented {
margin: 0;
}
.custom-view .mbsc-segmented.mbsc-material,
.custom-view .mbsc-segmented.mbsc-windows {
padding: 0 2px;
}
.custom-view .mbsc-segmented .mbsc-segmented-button {
padding: 0 1px;
}
.custom-view .mbsc-segmented .mbsc-icon {
font-size: 20px;
}
.custom-view .mbsc-segmented-button.mbsc-windows {
border: 0;
}