Angular Mat-Calendar能否显示当前月首尾周的前后月份日期？

不需要完全创建自定义日历，Mat-Calendar本身提供了配置项可以实现显示当前月份第一周、最后一周包含的上月/下月日期，核心是利用dateClass输入属性：

• 步骤1：定义日期分类函数
  在组件类中编写函数，判断日期是否属于当前显示的月份，对跨月日期标记自定义类：

  getDateClass(date: Date): string {
    const currentMonth = this.calendar.currentView.activeDate.getMonth();
    const dateMonth = date.getMonth();
    return currentMonth !== dateMonth ? 'cross-month-date' : '';
  }
  

  注：this.calendar需要通过@ViewChild(MatCalendar)获取组件实例。

• 步骤2：绑定到Mat-Calendar
  在模板中把函数绑定到dateClass属性：

  <mat-calendar #calendar [dateClass]="getDateClass"></mat-calendar>
  

• 步骤3：设置跨月日期样式
  在CSS中调整跨月日期的显示样式，比如设置为浅灰色并保持可交互：

  .cross-month-date {
    color: #ccc;
    pointer-events: auto; /* 如需禁止点击可改为none */
  }
  

如果需要更深度的自定义（比如修改日期单元格的DOM结构），可以通过扩展MatCalendar组件或使用自定义模板，但绝大多数场景下，上述dateClass方案足以实现需求，无需完全重写日历。

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