customize the mat-calendar, remove month label

Question

I am trying to remove the month label from angular material mat-calendar. Here is the stackblitz link

https://stackblitz.com/edit/am-all-imports-mviy6e?file=styles.scss

  <mat-calendar [dateClass]="dateClass()" [selected]="selectedDate" (selectedChange)="onSelect($event)"></mat-calendar>


onSelect(event){
    console.log(event);
    this.selectedDate = event;
  }

  dateClass() {
    return (date: Date): MatCalendarCellCssClasses => {
      const highlightDate = this.datesToHighlight
        .map(strDate => new Date(strDate))
        .some(d => d.getDate() === date.getDate() && d.getMonth() === date.getMonth() && d.getFullYear() === date.getFullYear());

      return highlightDate ? 'special-date' : '';
    };

}

For css:-

.mat-calendar-body-label{
   display: none;
  }

If i use above css code then, it move the calendar dates from left to right and make calendar distorted.

if I use this:-

.mat-calendar-body-label{
  opacity: 0;
  }

then it will leave empty row if there is no date

Answer 1

In addition to:

.mat-calendar-body-label{
     opacity: 0;
}

Add the following to get rid of the extra space when the first of the month starts on the first column:

.mat-calendar-body-label[colspan="7"] {
    display: none;
}