Change header of an inline datepicker angular material

Issue

To change the header of a datepicker in angular material we use [calendarHeaderComponent] e.g

<mat-form-field>
  <mat-label>Date</mat-label>
  <input formControlName="date" matInput [matDatepicker]="picker" />
  <mat-datepicker-toggle matSuffix [for]="picker">
    <mat-icon matDatepickerToggleIcon svgIcon="calendar_day"></mat-icon>
  </mat-datepicker-toggle>
  <mat-datepicker color="primary" [calendarHeaderComponent]="datePickerHeader" #picker></mat-datepicker>
</mat-form-field>

To get the datepicker inline we use mat-calendar directly

  <mat-calendar [(selected)]="date"></mat-calendar>

The challenge is that If I try to use calendarHeaderComponent directive on this component it throws error that this attribute is not allowed here. How can I solve this?

Solution

Assuming customDatePickerHeader is your custom header component. Try binding as follows:

<mat-calendar [headerComponent]="customDatePickerHeader" [(selected)]="date"></mat-calendar>

I'd have referenced a documentation but not sure it's easy to find one for the inline mat-calendar component. Will edit post if I manage to find it.

Answered By - ycomms