如何禁用Angular Material的mat-calendar年/月下拉框且保留切换箭头

实现方法（仅需添加CSS样式即可，无需修改原有组件逻辑） #

方案1：全局样式修改（适用于所有mat-calendar都要禁用年月下拉的场景） #

直接在项目全局样式文件（通常为src/styles.scss或src/styles.css）中添加如下代码：

/* 禁用年月下拉按钮的点击事件 */
.mat-calendar-period-button {
  pointer-events: none;
}

/* 可选：隐藏下拉箭头，让中间仅显示年月文本 */
.mat-calendar-arrow {
  display: none;
}

方案2：局部样式修改（仅作用于当前页面的日历，不污染全局） #

1. 先给你的日历外层容器添加自定义类：

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

2. 在当前组件的样式文件中添加如下代码：

::ng-deep .custom-calendar-container .mat-calendar-period-button {
  pointer-events: none;
}

/* 可选：隐藏下拉箭头 */
::ng-deep .custom-calendar-container .mat-calendar-arrow {
  display: none;
}

效果说明 #

修改完成后，日历中间的年月区域无法点击弹出下拉选择框，两侧的月份切换箭头功能完全不受影响，原有日历的选中、日期限制、自定义日期样式等逻辑全部正常生效。

内容的提问来源于stack exchange，提问作者Javiseeker