Angular中FullCalendar跨月高亮选中日期的实现方法咨询

1. 存储选中的日期日份 #

在组件类中定义变量保存点击日期的日数值（1-31），而非完整日期对象，跨月份时只需匹配日份即可：

selectedDay: number | null = null;

给FullCalendar绑定dateClick事件，捕获点击日期并提取日份：

<full-calendar
  ...
  (dateClick)="handleDateClick($event)"
></full-calendar>

handleDateClick(event: DateClickArg): void {
  this.selectedDay = event.date.getDate();
}

2. 动态添加高亮类 #

利用FullCalendar的dayCellClass回调，为匹配日份的日期单元格添加自定义高亮类。这个回调会在视图切换（比如切换月份）时自动重新计算所有单元格样式：

<full-calendar
  ...
  [dayCellClass]="getDayCellClass"
></full-calendar>

getDayCellClass(args: DayCellClassArg): string | null {
  if (!this.selectedDay) return null;

  // 处理目标月份无对应日份的边界情况（比如点击31号，下月只有30天）
  const monthLastDay = new Date(args.date.getFullYear(), args.date.getMonth() + 1, 0).getDate();
  const targetDay = Math.min(this.selectedDay, monthLastDay);

  if (args.date.getDate() === targetDay) {
    return 'highlight-date';
  }
  return null;
}

3. 自定义高亮样式 #

在组件CSS文件中添加高亮样式：

.highlight-date {
  background-color: #ffeb3b;
  border-radius: 50%;
  color: #333;
}

关键说明 #

• dayCellClass会在视图切换、日期渲染时自动触发，无需额外监听视图切换事件就能保持高亮
• 存储日份而非完整日期，避免跨月份时日期对象不匹配的问题
• 额外处理了“目标月份无对应日份”的场景，保证逻辑鲁棒性

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