Inline Datepicker with MatCalendar

For some case is it helpfully to have the datepicker as inline calendar. But currently the datepicker is only available with on body tag, with a full page background layer for handle the close interaction.

Is it possible to inject the datepicker inline, or can this be a ne feature for the future? One solution is to use the “mat-calendar” component, but its might be not official and a little bit hacky.

Like: <mat-calendar #calendar [selected]="selDate" (selectedChange)="getChangedValue($event)"></mat-calendar> But its need to add more code in the *.ts file to update the view correctly. Like the changed value:

getChangedValue(newDate) { this.selDate = newDate this.calendar['_activeDate'] = newDate; this.calendar['monthView'] = false; // this line updates the calendar view

Any solution to use the code easier or to implement at the current state an inline datepicker?

Best regards, Stephan

[windsound3482]

I have seen such a question in https://stackoverflow.com/questions/57433084/is-there-a-way-to-show-mat-calendar-with-multi-month-view-using-angular-material. About how to make a multi-month View with mat-calendar. From other Apis, there is always a mode called flat mode. Is there also such a thing in Mat-calendar? After reading the code i have found nothing…

[ankushgoyal27]

You can create your own header component by following the below example https://stackblitz.com/angular/kkrdobyvqpo?file=src%2Fapp%2Fdatepicker-custom-header-example.ts.

And rather than passing the header component in “[calendarHeaderComponent]=“exampleHeader”” use [headerComponent]=“exampleHeader” for mat-calendar.