Angular：如何让Mat-Calendar高亮周末（适配非完整周）

要实现不管月份首尾是否为完整周，都能高亮周六和周日，只需要通过dateClass属性自定义日期样式即可，具体步骤如下：

1. 在组件中定义日期类判断逻辑 #

在组件的TypeScript文件中，编写一个方法来判断日期是否为周末，并返回对应的样式类名：

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

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css']
})
export class CalendarComponent {
  constructor(private dateAdapter: DateAdapter<Date>) {}

  getWeekendClass(date: Date): string {
    const day = this.dateAdapter.getDayOfWeek(date);
    // 0代表周日，6代表周六
    return day === 0 || day === 6 ? 'weekend-date' : '';
  }
}

这里使用Angular Material的DateAdapter统一处理日期逻辑，避免不同地区日期格式的差异。

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

在mat-calendar标签上绑定自定义的日期类方法：

<mat-calendar [dateClass]="getWeekendClass"></mat-calendar>

3. 添加CSS样式高亮周末 #

在组件的CSS文件中，给周末日期设置自定义样式：

.weekend-date .mat-calendar-body-cell-content {
  background-color: #f0f0f0; /* 自定义周末背景色 */
  color: #ff4081; /* 自定义周末文字颜色 */
  border-radius: 50%; /* 可选：圆形高亮 */
}

.weekend-date.mat-calendar-body-selected .mat-calendar-body-cell-content {
  /* 处理选中状态下的周末样式，避免覆盖默认选中样式 */
  background-color: #ff4081 !important;
  color: white !important;
}

通过.mat-calendar-body-cell-content精准定位日期单元格内容，确保样式能正确应用到所有周末日期，包括月份开头或结尾的不完整周里的周末。

这个方案不依赖完整周的结构，会逐个判断每个日期是否为周末，完全适配所有月份的显示情况。

内容的提问来源于stack exchange，提问作者Ferran Muñoz