Need Help Disabling Year/month combobox in mat-calendar Angular Material Component

Issue

Good morning. I currently have the following inline mat-calendar angular material component. I don’t need this combobox but I do need the arrows. How do I disable it? I’ve tried several things and nothing is working!

enter image description here

This is the code Im using at the moment.

  <mat-card>
    <mat-calendar
      [(selected)]="selectedDate"
      (selectedChange)="selectedDateChange($event)"
      [minDate]="loadedMinHoliday"
      [maxDate]="loadedMaxHoliday"
      [dateClass]="dateClass()"
      [startAt]="startAt"
    ></mat-calendar>
  </mat-card>

Solution

You need :host ::ng-deep to access the DOM element for .mat-calendar-period-button which is generated by <mat-calendar> and overwrite its CSS styling rule.

Note:

Be sure to include the :host selector before ::ng-deep. If the
::ng-deep combinator is used without the :host pseudo-class selector,
the style can bleed into other components.

Remark: This answer is for hiding the month year button.

.component.css

:host ::ng-deep .mat-calendar-period-button {
  display: none;
}

Sample Solution on StackBlitz


References

(deprecated) /deep/, >>>, and ::ng-deep

Answered By – Yong Shun

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.