If you want to enable switching between week & month view, you can do it by adding a segmented control to the header and dynamically change the calendarType option. If you are not looking for dynamic switching you can configure a week calendar or a month calendar.
Demo
html<mbsc-datepicker
[controls]="['calendar']"
[calendarType]="calendarType"
[calendarSize]="1"
[calendarHeaderTemplate]="calendarHeader">
<ng-template #calendarHeader>
<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>
tsview = 'week';
changeView() {
setTimeout(() => {
switch (this.view) {
case 'week':
this.calendarType = 'week';
break;
case 'month':
this.calendarType = 'month';
break;
}
});
}
css.custom-view {
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;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
.mbsc-segmented {
margin: 0;
}
.mbsc-segmented.mbsc-material,
.mbsc-segmented.mbsc-windows {
padding: 0 2px;
}
.mbsc-segmented .mbsc-segmented-button {
padding: 0 1px;
}
.mbsc-segmented .mbsc-icon {
font-size: 20px;
}
.mbsc-segmented-button.mbsc-windows {
border: 0;
}
}
.custom-view-nav .mbsc-calendar-title.mbsc-material {
font-size: 16px;
}
ComponentTemplateCSS
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]="calendarType"
[calendarSize]="1"
[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>
.custom-view .mbsc-segmented .mbsc-icon {
font-size: 20px;
}