Angular Material是否支持在当前月日历中动态显示前后月份日期？

Angular Material的<mat-calendar>组件默认会在当前月份视图中展示前后月份的部分日期，只是默认状态下这些日期为灰色不可交互。以下是自定义实现的关键步骤：

• 启用前后月份日期的交互（可选）
  默认非当前月份日期处于禁用状态，若要允许点击，可通过dateFilter属性自定义过滤规则：

  // 组件类中定义方法
  allowAdjacentMonths(date: Date): boolean {
    const currentMonth = new Date().getMonth();
    const targetMonth = date.getMonth();
    // 允许当前月及前后一个月的日期
    return Math.abs(targetMonth - currentMonth) <= 1;
  }
  

  模板中绑定：

  <mat-calendar [dateFilter]="allowAdjacentMonths"></mat-calendar>
  

  若要允许所有日期，直接简化为：

  <mat-calendar [dateFilter]="() => true"></mat-calendar>
  

• 自定义前后月份日期样式
  默认非当前月份日期带有mat-calendar-body-other-month类，可通过CSS修改样式：

  /* 让前后月份日期与当前月样式一致 */
  .mat-calendar-body-other-month {
    color: rgba(0, 0, 0, 0.87);
    pointer-events: auto;
  }
  

  如需区分前后月份，使用cellClass属性添加自定义类：

  getCalendarCellClass(date: Date): string {
    const currentMonth = new Date().getMonth();
    const targetMonth = date.getMonth();
    if (targetMonth < currentMonth) {
      return 'prev-month-date';
    } else if (targetMonth > currentMonth) {
      return 'next-month-date';
    }
    return '';
  }
  

  模板绑定：

  <mat-calendar [cellClass]="getCalendarCellClass"></mat-calendar>
  

  对应的自定义样式：

  .prev-month-date { color: #757575; }
  .next-month-date { color: #616161; }
  

• 处理前后月份日期的选中事件
  通过selectedChange事件监听用户选择的任意日期（包括前后月份）：

  <mat-calendar (selectedChange)="handleDateSelect($event)"></mat-calendar>
  

  handleDateSelect(selectedDate: Date): void {
    // 处理选中逻辑，比如更新显示的月份、提交数据等
    console.log('选中日期:', selectedDate);
  }
  

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