Customize calendar header using [calendarHeaderComponent]

[arihs]

I am trying to customize the Sat Datepicker calendar header using my own component, but it is ignoring the Input.

This does not work:
<sat-datepicker #picker [calendarHeaderComponent]="exampleHeaderComponent" [rangeMode]="true"></sat-datepicker>

But it does work with Mat Datepicker:
<mat-datepicker #picker [calendarHeaderComponent]="exampleHeaderComponent"></mat-datepicker>

What am I doing wrong?

[SaturnTeam]

My bad. I'll try to fix now or tommorow

[SaturnTeam]

try 6.1.1. if it's not working, please create a demo https://stackblitz.com/edit/angular-4cfnyl

[arihs]

Sorry, but it's still not working. Now, the entire datepicker box that opens is empty.

I created a demo - basically an exact copy of material design's customized header.
(https://material.angular.io/components/datepicker/overview#customizing-the-calendar-header): See
https://stackblitz.com/edit/angular-zxjajr

Thanks for your help! It's much appreciated.

[SaturnTeam]

example from angular material not working too :)
You forgot to configure NgModule and import class from saturn-datepicker

here is working example:
https://stackblitz.com/edit/angular-ecwjqo?file=src/app/app.module.ts

[arihs]

Thank you!

[arihs]

Is there a way to EDIT the calendarHeader component, rather than REPLACE it entirely? [Or, alternatively, is it possible to reuse the date selection (dropdown and fwd/bck navigation for months) in my replacement header component? (I don't want to have to rewrite that)]
I am trying to add a simple toggle switch to the calendar header (yes, it has to be in the calendar component).

[SaturnTeam]

No, but you can copy-paste source code of original header

[arihs]

There's no way of extending SatCalendarHeader or MatCalendarHeader?

[SaturnTeam]

Extending components is not thing that angular can do now (if I remember correctly).

[arihs]

Update: I did extend SatCalendarHeader on my customHeaderComponent and it works like a charm.
Thanks!

[Imansh338]

I have a similar Problem, I am trying to implement the calenderHeaderComponent from an existing mat datepicker into a sat datepicker. but the pop-up showing up blank white. the error on console is :

ERROR Error: StaticInjectorError(AppModule)[ExampleHeader -> MatCalendar]:
StaticInjectorError(Platform: core)[ExampleHeader -> MatCalendar]:
NullInjectorError: No provider for MatCalendar!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get

any Advice! Thanx 👍