Angular Material日历如何为含补位空白单元格在内的所有日期单元格加边框

解决方案思路 #

Angular Material日历默认会显示前后月份的日期填充整周，我们可以通过自定义单元格模板，将非当前月份的日期替换为带边框的空白单元格，满足需求。

步骤1：组件逻辑实现 #

在日历组件中添加日期归属判断方法，绑定视图日期：

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

@Component({
  selector: 'app-custom-calendar',
  templateUrl: './custom-calendar.component.html',
  styleUrls: ['./custom-calendar.component.scss']
})
export class CustomCalendarComponent {
  currentViewDate = new Date();

  // 判断日期是否属于当前视图月份
  isCurrentMonth(date: Date): boolean {
    return date.getMonth() === this.currentViewDate.getMonth() && 
           date.getFullYear() === this.currentViewDate.getFullYear();
  }
}

步骤2：自定义单元格模板 #

在组件模板中，用cellTemplate替换默认日历单元格的渲染方式：

<mat-calendar 
  [viewDate]="currentViewDate" 
  [cellTemplate]="customCellTemplate">
</mat-calendar>

<ng-template #customCellTemplate let-date let-selected="selected" let-focused="focused">
  <div class="calendar-cell"
       [class.empty-cell]="!isCurrentMonth(date)"
       [class.selected]="selected && isCurrentMonth(date)"
       [class.focused]="focused && isCurrentMonth(date)">
    {{ isCurrentMonth(date) ? date.getDate() : '' }}
  </div>
</ng-template>

步骤3：样式调整 #

添加SCSS样式，给所有单元格统一加边框，并处理空白单元格显示：

/* 统一单元格基础样式 */
.calendar-cell {
  border: 1px solid #d0d0d0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* 空白单元格样式（可选背景色区分） */
.empty-cell {
  background-color: #fafafa;
}

/* 隐藏默认的非当前月份日期文本 */
.mat-calendar-body-cell:not(.mat-calendar-body-active):not(.mat-calendar-body-selected):not(.mat-calendar-body-today).mat-calendar-body-disabled {
  color: transparent;
}

补充说明 #

• 若你的一周起始日不是默认周日，可通过MAT_DATE_LOCALE或DateAdapter配置调整，上述代码会自动适配。
• 如需完全移除前后月份的日期对象、仅渲染空白单元格，可扩展MatCalendarMonthView组件重写月份数据生成逻辑，但上述方法已能满足绝大多数场景需求。

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