Allow custom Calendar Header components for the MatCalendar component

[lashisu]

What is the expected behavior?

The filter & calendarHeaderComponent should work as mentioned in the document

What is the current behavior?

The filter & calendarHeaderComponent is not working.

What are the steps to reproduce?

StackBlitz starter: https://stackblitz.com/edit/angular-date-filter-moment?file=app%2Fdatepicker-overview-example.ts

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

7.3.1

Is there anything else we should know?

I want to disable some of the dates based on our data & want to make the header so the user can not change its view to month or year.

[epedido]

I have the same issue. Did you find any workaround ?

[robertsmith2]

Same issue this functionality would be Awesome!

[alexgoldstone]

This is already supported but instead of calendarHeaderComponent you should use headerComponent.

e.g.
<mat-calendar [headerComponent]="customCalendarHeader"></mat-calendar>

Similarly, instead of matDatepickerFilter you should use dateFilter.

e.g.
<mat-calendar [dateFilter]="customDateFilter"></mat-calendar>

[Nilomiranda]

Anything I specify as customHeader makes the calendar to not be rendered at all

[annieyw]

customHeaderComponent should work, here is an example: https://stackblitz.com/angular/jxrdygrqknj?file=src%2Fapp%2Fdatepicker-custom-header-example.ts

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}