Angular FullCalendar点击日视图时dayCellDidMount未触发怎么解决

问题根因 #

• dayCellDidMount 仅作用于FullCalendar各视图的全天时段区域日期单元格，月视图、周视图默认渲染该区域，因此回调正常触发
• 默认日视图优先展示分时时段区域，该区域的单元格挂载不会触发dayCellDidMount回调

解决方案 #

方案1：官方推荐的无DOM操作方案（适配所有视图，性能更稳定） #

FullCalendar提供了专门的单元格类名注入回调，不需要手动监听挂载事件修改DOM，逻辑统一且不会出现视图切换后的样式丢失问题：

1. 在FullCalendar配置项中添加类名回调：

import { CalendarOptions } from '@fullcalendar/angular';

export class YourComponent {
  calendarOptions: CalendarOptions = {
    // 保留你原有的其他配置
    dayCellClassNames: (arg) => {
      // 替换为你自己的特殊日期判断逻辑
      const specialDateList = ['2024-05-20', '2024-06-01', '2024-10-01'];
      const currentDateStr = arg.date.toISOString().split('T')[0];
      
      if (specialDateList.includes(currentDateStr)) {
        return 'special-date-bg';
      }
      return [];
    },
    // 如需同时修改日视图分时区域的单元格背景，额外添加如下配置
    slotClassNames: (arg) => {
      const specialDateList = ['2024-05-20', '2024-06-01', '2024-10-01'];
      const currentDateStr = arg.date.toISOString().split('T')[0];
      
      if (specialDateList.includes(currentDateStr)) {
        return 'special-date-bg';
      }
      return [];
    }
  }
}

2. 在全局样式文件（通常为src/styles.scss）中添加自定义样式：

.special-date-bg {
  background-color: #fff3cd !important;
  // 可按需添加其他样式
}

方案2：手动操作DOM的兼容方案 #

如果确实需要拿到单元格元素做自定义处理，可以同时注册两个挂载回调适配所有视图：

calendarOptions: CalendarOptions = {
  // 保留你原有的其他配置
  // 适配月/周视图全天区域
  dayCellDidMount: (arg) => {
    this.updateCellStyle(arg.date, arg.el);
  },
  // 适配日视图分时区域
  slotDidMount: (arg) => {
    this.updateCellStyle(arg.date, arg.el);
  }
}

private updateCellStyle(date: Date, cellEl: HTMLElement) {
  const specialDateList = ['2024-05-20', '2024-06-01', '2024-10-01'];
  const currentDateStr = date.toISOString().split('T')[0];
  if (specialDateList.includes(currentDateStr)) {
    cellEl.style.backgroundColor = '#fff3cd';
  }
}

可选配置：开启日视图全天时段显示 #

如果需要日视图也显示顶部的全天时段区域，让dayCellDidMount在日视图也触发，添加如下配置即可：

calendarOptions: CalendarOptions = {
  views: {
    timeGridDay: {
      allDaySlot: true // 开启日视图全天时段展示
    }
  }
}

内容的提问来源于stack exchange，提问作者Nazim Ahmed