Show a week calendar instead of a monthly calendar view to save space. By setting the calendarType to 'week' and passing the count in the calendarSize option you can simply enable a week view.
You can dynamically change the number of weeks or switch between month and week view without the need for recycling the whole component.
Interested in switching week and month view? Learn how to set up switch inside the calendar →
Demo
Change the week count
<mbsc-datepicker
calendarType="week"
[calendarSize]="2 ">
</mbsc-datepicker>
ComponentTemplate
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {}
<mbsc-datepicker [controls]="['calendar']" display="inline" calendarType="week" [calendarSize]="1"></mbsc-datepicker>
<mbsc-datepicker [controls]="['calendar']" display="inline" calendarType="week" [calendarSize]="2"></mbsc-datepicker>
<mbsc-datepicker [controls]="['calendar']" display="inline" calendarType="week" [calendarSize]="3"></mbsc-datepicker>