Angular Calendar Quarter and Year View

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 {
  viewType = 'q4';
  calType: 'year' | 'month' | 'week' = 'month';
  selectedDate = new Date();
  activeDate = new Date();

  changeView(): void {
    const year = this.activeDate.getFullYear();
    let date: Date;
    switch (this.viewType) {
      case 'q1':
        this.calType = 'month';
        date = new Date(year, 1, 1);
        break;
      case 'q2':
        this.calType = 'month';
        date = new Date(year, 4, 1);
        break;
      case 'q3':
        this.calType = 'month';
        date = new Date(year, 7, 1);
        break;
      case 'q4':
        this.calType = 'month';
        date = new Date(year, 10, 1);
        break;
      case 'year':
        this.calType = 'year';
        date = new Date(year, this.selectedDate.getMonth(), 1);
        break;
      default:
        this.calType = 'year';
        date = new Date(year, this.selectedDate.getMonth(), 1);
    }
    this.selectedDate = date;
    this.activeDate = date;
  }
  onPageChange(args: any): void {
    let type = '';
    if (this.calType === 'year') {
      type = 'year';
    } else {
      const month = args.firstDay.getMonth();
      if (month < 3) {
        type = 'q1';
      } else if (month < 6) {
        type = 'q2';
      } else if (month < 9) {
        type = 'q3';
      } else {
        type = 'q4';
      }
    }
    this.viewType = type;
    this.activeDate = args.firstDay;
  }
}

<mbsc-datepicker
  [(ngModel)]="selectedDate"
  [controls]="['calendar']"
  display="inline"
  [calendarSize]="3"
  [calendarType]="calType"
  [calendarHeaderTemplate]="headerTemplate"
  refDate="1970-01-01"
  [showWeekNumbers]="true"
  (onPageChange)="onPageChange($event)"
>
  <ng-template #headerTemplate>
    <mbsc-calendar-nav></mbsc-calendar-nav>
    <div class="quarter-year-header-picker">
      <mbsc-segmented-group [(ngModel)]="viewType" (change)="changeView()">
        <mbsc-segmented value="q1">Q1</mbsc-segmented>
        <mbsc-segmented value="q2">Q2</mbsc-segmented>
        <mbsc-segmented value="q3">Q3</mbsc-segmented>
        <mbsc-segmented value="q4">Q4</mbsc-segmented>
        <mbsc-segmented value="year">Year</mbsc-segmented>
      </mbsc-segmented-group>
    </div>
    <mbsc-calendar-prev></mbsc-calendar-prev>
    <mbsc-calendar-next></mbsc-calendar-next>
  </ng-template>
</mbsc-datepicker>

.mbsc-datepicker .quarter-year-header-picker .mbsc-segmented {
  max-width: 280px;
  margin: 0 auto;
}

.quarter-year-header-picker {
  flex: 1 0 auto;
}