如何为mat-calendar的指定日期添加自定义样式（高亮事件日期）

嘿，要给Angular Material日历里的事件日期添加自定义高亮样式，其实用组件自带的dateClass输入属性就能轻松搞定，我给你一步步拆解具体实现：

1. 在组件类中定义日期判断与类名返回方法 #

首先，我们需要一个方法来判断每个日历日期是否属于你的事件日期数组，并且返回对应的自定义类名。这里要注意日期对象的时间部分会影响直接比较，所以我们先把事件日期转成统一的YYYY-MM-DD格式字符串，方便后续准确匹配：

import { Component } from '@angular/core';
import { MatCalendarCellCssClasses } from '@angular/material/datepicker';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  selectedDates = [new Date('2014-08-28T11:13:59'), new Date('2014-07-27T11:13:59')];
  // 预处理事件日期为统一格式的字符串数组
  private eventDateStrings: string[];

  constructor() {
    this.eventDateStrings = this.selectedDates.map(date => this.formatDate(date));
  }

  // 辅助方法：将Date对象转为YYYY-MM-DD格式字符串
  private formatDate(date: Date): string {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  }

  // 给mat-calendar提供的dateClass方法
  dateClass = (date: Date): MatCalendarCellCssClasses => {
    const currentDateStr = this.formatDate(date);
    // 如果当前日期在事件日期数组中，返回自定义类名，否则返回空
    return this.eventDateStrings.includes(currentDateStr) ? 'highlight-event-date' : '';
  };
}

2. 在模板中绑定dateClass属性 #

修改你的HTML模板，给<mat-calendar>添加[dateClass]="dateClass"绑定：

<mat-card-content>
  <div class="date-picker">
    <mat-calendar 
      [selected]="selectedDates" 
      (selectedChange)="selectedDates = $event" 
      #calendar
      [dateClass]="dateClass">
    </mat-calendar>
  </div>
</mat-card-content>

3. 添加自定义高亮样式 #

在组件的CSS文件中，定义你的高亮样式，比如：

/* 自定义事件日期的高亮样式 */
.highlight-event-date {
  background-color: #4CAF50; /* 绿色高亮，可自行替换 */
  border-radius: 50%; /* 圆形高亮效果，可选 */
  color: white; /* 白色文字，提升可读性 */
}

/* 可选：调整日期单元格的内边距，让高亮效果更自然 */
.mat-calendar-body-cell-content {
  padding: 6px;
}

关键说明 #

• dateClass是Angular Material Calendar专门提供的输入属性，它会为每个日历单元格调用传入的函数，返回对应的CSS类名。
• 预处理日期为字符串是为了避免因Date对象的时间部分不同（比如时分秒）导致的匹配失败，保证只有年月日相同的日期才会被高亮。
• 样式部分完全可以根据你的需求自定义，比如修改背景色、边框、圆角等，适配你的UI设计。

内容的提问来源于stack exchange，提问作者Marko Lovás