title: How to listen to mat-calendar-header events
body: <p>I am using the <a href="https://github.com/SaturnTeam/saturn-datepicker" rel="noreferrer">saturn daterange-picker</a> and using the sat-calendar for a date range picker implementation. Now, the users can only select the months in which a certain other object (timecard) doesn't already have a timecard which allows for adding a new entry.</p>
  
  <p>We have an implementation that disables all of these months on a (click) event which means it also gets triggered for the multi-year view and the month view which sometimes block the selection (See gif.).</p>
  
  <p><a href="https://i.stack.imgur.com/IL298.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/IL298.gif" alt="enter image description here"></a></p>
  
  <p>in our code html we have the following:</p>
  
  <pre><code>&lt;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)"
    &gt;&lt;/sat-calendar&gt;
  </code></pre>
  
  <p>and our component:</p>
  
  <pre><code>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&lt;SatDatepickerRangeValue&lt;Date&gt;&gt; = new EventEmitter();
    @ViewChild('calendar') calendar: SatCalendar&lt;Date&gt;;
  
    range?: SatDatepickerRangeValue&lt;Date&gt;;
    constructor(private readonly dateAdapter: DateAdapter&lt;Date&gt;) {}
  
    ngOnInit(): void {
      this.dateAdapter.getFirstDayOfWeek = () =&gt; 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&lt;Date&gt;): void {
      const activeTimesheetPlacement = this.getActivePlacementTimesheet(calendar);
      const enabledPlacementStatus = [0, 1 , 2];
  
      if (typeof activeTimesheetPlacement !== 'undefined' &amp;&amp; !enabledPlacementStatus.includes(activeTimesheetPlacement.status)) {
        this.setMonthEnabled(false);
      } else {
        this.setMonthEnabled(true);
      }
    }
  
    onDateRangesChange(calendar: SatCalendar&lt;Date&gt;, range: SatDatepickerRangeValue&lt;Date&gt;): 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 =&gt; isEnabled;
    }
  
    private getActivePlacementTimesheet(calendar: SatCalendar&lt;Date&gt;): 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 =&gt; x.year === activeYear &amp;&amp; x.month === activeMonth);
    }
  }
  </code></pre>
  
  <p>Those events, are in the Mat-calendar-header implementation. Is there a way to listen to these events with an outputter on the sat-calendar? Because the (click) is too broad for my liking. In my template I only use the sat-calendar (or mat-calendar) but I see it uses the mat-calendar-header as default. </p>
  
  <p>Or... is there a better approach to filter those values out of the datepicker to make them disabled and also still make it possible to select the months and years in the multi-year and month view?</p>