Angular Material日期选择器：多日期不同颜色高亮实现疑问

最优方案：合并逻辑到单个方法 #

没必要写两个分开的dateClass方法，把不同日期的判断逻辑合并到一个方法里就行，代码更简洁，也完全符合dateClass属性的要求。

TypeScript代码：

dateClass: MatCalendarCellClassFunction<Date> = (cellDate, view) => {
  // 只在月视图下应用高亮
  if (view === 'month') {
    const day = cellDate.getDate();
    // 根据日期返回对应的样式类
    if (day === 1) {
      return 'orangeClass';
    } else if (day === 20) {
      return 'greenClass';
    }
  }
  // 不符合条件返回空字符串
  return '';
};

样式代码（CSS/SCSS）：

.orangeClass {
  background-color: orange;
  border-radius: 50%; /* 可选，让高亮变成圆形，和官方示例风格一致 */
  color: white; /* 可选，让日期文字更清晰 */
}

.greenClass {
  background-color: green;
  border-radius: 50%;
  color: white;
}

HTML绑定：

直接把合并后的方法绑定到dateClass属性即可：

<mat-card class="demo-inline-calendar-card">
  <mat-calendar [(selected)]="selected" [dateClass]="dateClass" #picker></mat-calendar>
</mat-card>

如果非要保留原有两个方法：合并调用 #

要是你想保留之前写的dateClass1和dateClass2，可以新建一个组合方法，调用这两个方法并返回合并后的类名：

TypeScript代码：

dateClass1: MatCalendarCellClassFunction<Date> = (cellDate, view) => {
  if (view === 'month') {
    const day = cellDate.getDate();
    return day === 1 ? 'orangeClass' : '';
  }
  return '';
};

dateClass2: MatCalendarCellClassFunction<Date> = (cellDate, view) => {
  if (view === 'month') {
    const day = cellDate.getDate();
    return day === 20 ? 'greenClass' : '';
  }
  return '';
};

// 组合两个方法
combinedDateClass: MatCalendarCellClassFunction<Date> = (cellDate, view) => {
  const class1 = this.dateClass1(cellDate, view);
  const class2 = this.dateClass2(cellDate, view);
  // 返回空格分隔的类名，空值会被自动过滤
  return `${class1} ${class2}`.trim();
};

HTML绑定：

<mat-card class="demo-inline-calendar-card">
  <mat-calendar [(selected)]="selected" [dateClass]="combinedDateClass" #picker></mat-calendar>
</mat-card>

原理说明 #

MatCalendarCellClassFunction允许返回：

• 单个样式类名字符串
• 多个用空格分隔的样式类名字符串
• 空字符串（不应用任何样式）

所以不管是合并逻辑还是合并方法调用，只要最终返回正确的类名即可。

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