CODEWITHSUNDEEP
angularangular-materialcalendar
vivek
vivek

Reputation: 393

Custom mat calendar header

I am expecting the mat calendar header as customised one like in the below screen shot

enter image description here

Upvotes: 1

Views: 7631

Answers (2)

euphylliaaa
euphylliaaa

Reputation: 1

Above stackblitz doesn't show how to properly format the calendar header. If you want the header to display in 'MMMM YYYY' format. Change periodLabel() to below:

  get periodLabel() {
    return this._dateAdapter.format(this._calendar.activeDate, this._dateFormats.display.monthYearA11yLabel);
  }

Upvotes: 0

Eliseo
Eliseo

Reputation: 57961

It's only create a custom header like the example of the docs

You can use with a mat-calendar like

  <mat-calendar [headerComponent]="exampleHeader" [(selected)]="date">
  </mat-calendar>

See the forked stackblitz of the example here

Upvotes: 5

Related Questions