Angular Mat-Calendar特定星期表头颜色修改方法咨询

方法一：CSS选择器直接定位（简单快捷） #

Mat-Calendar的表头单元格带有mat-calendar-table-header-cell类，默认表头顺序为周日到周六（若设置locale为周一开头，顺序会变为周一到周日，需自行调整）。

要把周一、周二表头改成红色，直接写CSS样式：

/* 默认周日为第1个单元格，周一对应第2个、周二对应第3个 */
.mat-calendar-table-header th:nth-child(2),
.mat-calendar-table-header th:nth-child(3) {
  color: red !important;
}

若你的日历是周一作为一周起始，周一对应第1个单元格、周二对应第2个，需修改nth-child的数值。

方法二：自定义表头模板（支持动态控制） #

如果需要根据业务逻辑动态切换哪些星期表头变色，可以自定义表头模板：

1. 在组件模板中绑定headerCellTemplate：

<mat-calendar [headerCellTemplate]="customHeaderTpl"></mat-calendar>

<ng-template #customHeaderTpl let-dayName>
  <span [style.color]="checkTargetDay(dayName) ? 'red' : ''">
    {{ dayName }}
  </span>
</ng-template>

2. 在组件类中实现判断逻辑：

checkTargetDay(dayName: string): boolean {
  // 中文环境对应"周一""周二"，英文环境对应"Mon""Tue"，按需调整
  return ['周一', '周二'].includes(dayName);
}

关于DateClass无法修改表头的原因 #

DateClass的作用范围是日历主体的日期单元格（显示数字的格子），表头属于独立的顶部区域，不在DateClass的生效范围内，因此无法通过它修改表头样式。

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