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?
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.