FullCalendar v5 修改背景事件首日显示颜色的实现方法

实现思路 #

• 跨天背景事件在FullCalendar中会按日期拆分生成独立的DOM节点，每个节点对应事件覆盖的某一天
• 在eventDidMount回调中，对比当前渲染节点对应的日期和事件的起始日期，匹配即自定义首日样式

核心代码实现 #

首先在日历初始化配置的eventDidMount回调中加入如下逻辑：

eventDidMount: function(info) {
  // 仅处理背景事件，不需要可删除该判断
  if (info.event.display === 'background') {
    // 1. 获取事件起始日期，转成YYYY-MM-DD格式字符串
    const eventStartDate = info.event.start.toISOString().split('T')[0]
    // 2. 获取当前渲染节点对应的日期，兼容天网格/时间网格两种视图
    const dayEl = info.el.closest('.fc-daygrid-day')
    const timeColEl = info.el.closest('.fc-timegrid-col')
    const currentRenderDate = dayEl ? dayEl.dataset.date : timeColEl?.dataset.date

    // 3. 日期匹配则修改当前背景块样式
    if (currentRenderDate === eventStartDate) {
      info.el.style.backgroundColor = 'red'
      // 更推荐用自定义类通过CSS控制样式，灵活性更高：
      // info.el.classList.add('bg-event-first-day')
    }
  }
}

如果使用自定义类的方式，可添加对应CSS规则：

.bg-event-first-day {
  background-color: red !important;
  /* 可按需补充边框、透明度等其他样式 */
}

注意事项 #

• 若项目配置了自定义时区，建议使用FullCalendar自带的formatDate工具方法格式化日期，避免时区偏差导致的匹配错误
• 不需要区分事件类型的话可以删掉背景事件的判断逻辑，所有事件都可以用该方法修改首日样式

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