Components: Allow custom Calendar Header components for the MatCalendar component
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.
lashisu
All 4 comments
I have the same issue. Did you find any workaround ?
epedido
on 6 Apr 2019
Same issue this functionality would be Awesome!
robertsmith2
on 23 May 2019
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>
alexgoldstone
on 1 Oct 2019
Anything I specify as customHeader makes the calendar to not be rendered at all
Nilomiranda
on 18 Oct 2019
Related issues
julianobrasil
路
3Comments
kara
路
3Comments
crutchcorn
路
3Comments
Hiblton
路
3Comments
vitaly-t
路
3Comments
Most helpful comment
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>