Material Datepicker change month view event

Question

is there any way how to detect that calendar has new month view is loaded, when "yellow buttons" (see screenshot) are used?

Answer 1

You can listen for click events of those buttons on the calendar using Renderer2.

Code from this blog post.

constructor( private renderer: Renderer2g) { }

ngAfterViewInit() {
    let buttons = document.querySelectorAll('mat-calendar .mat-calendar-previous-button,' +
        'mat-calendar .mat-calendar-next-button');

    if (buttons) {
        Array.from(buttons).forEach(button => {
            this.renderer.listen(button, "click", () => {
                console.log("Month changed");
            });
        })
    }
}

Answer 2

You can just use your own header component with whatever buttons and events your want:

<mat-calendar [headerComponent]="headerComponent"></mat-calendar>

And declare a variable headerComponent in the .ts:

public headerComponent = MyCoolHeaderComponent;

You will have to provide your own UI and functionality for the header (in your MyCoolHeaderComponent class).