Angular mat-calendar高亮HTTP请求返回的多个日期失效问题

代码不生效是三个核心问题导致的：

• 类型错误：后端返回的date字段是YYYY-MM-DD格式的字符串，不是JavaScript原生Date对象，判断逻辑中直接对字符串调用getDate()/getMonth()/getFullYear()会抛出类型错误，高亮逻辑完全无法执行。
• 异步更新未触发重绘：模板中[dateClass]="dateClass()"绑定的判断函数在组件初始化阶段就已经执行完成，HTTP请求是异步逻辑，等dates数组更新时，日历组件没有收到变更通知，不会重新执行样式类计算。
• 基础语法错误：代码中使用了this.subs.add添加订阅，但没有提前声明初始化subs订阅容器，这行代码本身就会报错，导致接口请求逻辑无法正常执行。

1. 统一日期格式 #

接口返回的日期字符串不要直接存入数组，统一转换为「当日0点时间戳」格式存储，既可以避免引用类型比对问题，也能消除时分秒、时区带来的判断误差，比对性能更高。

2. 主动触发日历重绘 #

通过模板引用变量获取MatCalendar实例，等接口数据加载完成后，调用实例的updateTodaysDate()方法强制日历重绘所有单元格，重新执行样式判断。

3. 补全订阅逻辑 #

初始化订阅容器，在组件销毁时取消订阅，避免内存泄漏。

组件类完整代码 #

import { Component, EventEmitter, Output, ViewChild, OnInit, OnDestroy } from '@angular/core';
import { MatCalendar, MatCalendarCellCssClasses } from '@angular/material/datepicker';
import { Subscription } from 'rxjs';
import { LunchApiService } from 'your-service-path/lunch-api.service';

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class CalendarComponent implements OnInit, OnDestroy {
  @Output()
  changedDateValue = new EventEmitter<Date>();

  // 获取日历组件实例
  @ViewChild(MatCalendar) calendar!: MatCalendar<Date>;

  selectedDate: Date = new Date();
  // 存储需要高亮的日期的0点时间戳
  highlightDateStamps: number[] = [];
  // 初始化订阅容器
  private subs = new Subscription();

  constructor(private readonly lunchApiService: LunchApiService) { }

  dateClass() {
    return (date: Date): MatCalendarCellCssClasses => {
      // 将日历传入的日期转为当日0点时间戳
      const currentStamp = new Date(
        date.getFullYear(),
        date.getMonth(),
        date.getDate()
      ).getTime();
      return this.highlightDateStamps.includes(currentStamp) ? 'special-date' : 'normal-date';
    };
  }

  onChangedDate(): void {
    this.changedDateValue.emit(this.selectedDate);
  }

  ngOnInit(): void {
    this.subs.add(
      this.lunchApiService.findAll().subscribe(data => {
        this.highlightDateStamps = data.map(item => {
          // 拆分后端返回的YYYY-MM-DD格式字符串
          const [year, month, day] = item.date.split('-').map(Number);
          // 注意JS Date的月份从0开始计数，需要把接口返回的1-12月减1
          return new Date(year, month - 1, day).getTime();
        });
        // 数据加载完成后强制日历重绘
        this.calendar.updateTodaysDate();
      })
    );
  }

  ngOnDestroy(): void {
    this.subs.unsubscribe();
  }
}

模板代码 #

<mat-card class="calendar">
  <mat-calendar 
    #calendar
    [(selected)]="selectedDate"
    (selectedChange)="onChangedDate()"
    [dateClass]="dateClass()"
  ></mat-calendar>
</mat-card>

样式代码 #

因为已经设置了ViewEncapsulation.None，直接在组件样式文件中写对应类名的样式即可生效：

.special-date {
  background: #4caf50;
  border-radius: 50%;
  color: #fff;
}
.normal-date {
  // 普通日期自定义样式可写在这里
}

如果午餐日期数据量很大，不需要一次性加载全量数据，可以监听MatCalendar的stateChanges事件，在用户切换月份时只请求对应月份的日期数据，减少首屏请求体积，提升加载速度。
如果需要更复杂的日期标记逻辑（比如不同日期显示不同颜色、标记角标等），也可以通过自定义DateAdapter或者重写日历单元格模板实现，简单高亮场景用上面的方案足够轻量。

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