Scroll Direction, Week Numbers & Outer Days
The calendar view can be customized with a couple of different parameters:
- Set a month change direction - specify
'horizontal'or'vertical'in thecalendarScrolloption - Set the first day of the week - specify the first day of the week using the
firstDayoption, where Sunday is 0, Monday is 1, etc. - Show week numbers - set the
showWeekNumbersto true and show a week counter starting from the first week of every year - Hide the outer days of a month - set the
showOuterDaysto false in case you don't want to see days from previous and next months
Demo
Set a scrolling direction
Set the first day of week to
Annual week numbers
Show week counter
Outer days (Hidden by default for vertical, visible by default for horizontal)
Show outer days
<mbsc-datepicker
calendarScroll="horizontal "
[firstDay]="1 "
[showWeekNumbers]="false "
[showOuterDays]="true ">
</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"
calendarScroll="horizontal"
[showWeekNumbers]="true"
[showOuterDays]="true"
></mbsc-datepicker>