如何收听 mat-calendar-header 事件

Question

我正在使用saturn daterange-picker并使用 sat-calendar 进行日期范围选择器实现。现在，用户只能选择某个其他对象（考勤卡）还没有允许添加新条目的考勤卡的月份。

我们有一个实现，可以在（点击）事件上禁用所有这些月份，这意味着它也会被触发多年视图和有时会阻止选择的月份视图（参见 gif。）。

在我们的代码 html 中，我们有以下内容：

<sat-calendar
    #calendar
    [dateFilter]="filterdate"
    [rangeMode]="true"
    [minDate]="minDate"
    [maxDate]="maxDate"
    orderPeriodLabel="month"
    (dateRangesChange)="onDateRangesChange(calendar, $event)"
    (monthSelected)="functionName($event)"
    (selectedChange)="functionName($event)"
    (click)="onMonthChange(calendar)"
  ></sat-calendar>

和我们的组件：

import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
import { DateAdapter, SatCalendar, SatDatepickerRangeValue } from 'saturn-datepicker';
// left out imports    
@Component({
  selector: 'date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.scss'],
})
export class DatePickerComponent implements OnInit, OnChanges {
  minDate: Date;
  maxDate: Date;

  filterdate: any;

  @Input() placement: Placement;
  @Input() placementTimesheets: PlacementTimesheet[];
  @Output() readonly updateDateRange: EventEmitter<SatDatepickerRangeValue<Date>> = new EventEmitter();
  @ViewChild('calendar') calendar: SatCalendar<Date>;

  range?: SatDatepickerRangeValue<Date>;
  constructor(private readonly dateAdapter: DateAdapter<Date>) {}

  ngOnInit(): void {
    this.dateAdapter.getFirstDayOfWeek = () => 1;
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.placement) {
      if (this.placement) {
        this.minDate = new Date(this.placement.startDate);
        this.maxDate = new Date(this.placement.endDate);
      }
    }

    if (changes.placementTimesheets) {
      if (this.placementTimesheets) {
        this.onMonthChange(this.calendar);
      }
    }
  }

  functionName(date) {
    console.log(date);
  }

  onMonthChange(calendar: SatCalendar<Date>): void {
    const activeTimesheetPlacement = this.getActivePlacementTimesheet(calendar);
    const enabledPlacementStatus = [0, 1 , 2];

    if (typeof activeTimesheetPlacement !== 'undefined' && !enabledPlacementStatus.includes(activeTimesheetPlacement.status)) {
      this.setMonthEnabled(false);
    } else {
      this.setMonthEnabled(true);
    }
  }

  onDateRangesChange(calendar: SatCalendar<Date>, range: SatDatepickerRangeValue<Date>): void {
    calendar.beginDate = range.begin;
    calendar.endDate = range.end;
    this.range = range;
    this.updateDateRange.emit(this.range);
  }

  private setMonthEnabled(isEnabled: boolean): void {
    this.filterdate = (d: Date): boolean => isEnabled;
  }

  private getActivePlacementTimesheet(calendar: SatCalendar<Date>): PlacementTimesheet {
    // get current month (0-11)
    let activeMonth = new Date().getMonth();
    let activeYear = new Date().getFullYear();

    if (calendar.activeDate) {
      activeMonth = new Date(calendar.activeDate).getMonth();
      activeYear = new Date(calendar.activeDate).getFullYear();
    }

    // Add 1 to make months 1-12
    activeMonth = activeMonth + 1;

    return this.placementTimesheets.find(x => x.year === activeYear && x.month === activeMonth);
  }
}

这些事件在 Mat-calendar-header 实现中。有没有办法用卫星日历上的输出器来收听这些事件？因为（点击）对我来说太宽泛了。在我的模板中，我只使用 sat-calendar（或 mat-calendar），但我看到它默认使用 mat-calendar-header。

或者...是否有更好的方法从日期选择器中过滤掉这些值以禁用它们，并且仍然可以在多年和月份视图中选择月份和年份？