如何让FullCalendar跨天事件的标题显示在每一天而非仅首日？

问题描述 #

使用Fullcalendar时，跨多天的事件仅在首日显示标题；若事件跨越多行，标题还会显示在下行的最左侧。需要实现让事件标题显示在事件覆盖的每一天中，效果如下：

实现方案 #

通过Fullcalendar的事件渲染钩子自定义跨天事件的显示逻辑，为事件覆盖的每个日期都生成标题元素，具体步骤如下：

1. 利用eventDidMount钩子处理已渲染事件 #

初始化Fullcalendar时配置eventDidMount回调，针对跨天事件做特殊处理：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    events: [
      // 示例跨天事件
      {
        title: '跨天项目评审',
        start: '2024-05-15',
        end: '2024-05-18'
      }
    ],
    eventDidMount: function(info) {
      // 判断是否为跨2天及以上的事件
      if (info.event.end && info.event.start.diff(info.event.end, 'days') < -1) {
        var eventEl = info.el;
        var titleText = info.event.title;
        // 获取事件覆盖的所有日期单元格容器
        var dateCells = eventEl.querySelectorAll('.fc-daygrid-day-frame');
        
        dateCells.forEach(function(cell, index) {
          // 跳过首日（已有默认标题）
          if (index === 0) return;
          // 创建标题元素并复用默认样式类
          var titleEl = document.createElement('div');
          titleEl.className = 'fc-event-title fc-sticky';
          titleEl.textContent = titleText;
          // 将标题插入当前日期的事件容器内
          var eventContainer = cell.querySelector('.fc-daygrid-event-harness');
          if (eventContainer) {
            eventContainer.insertBefore(titleEl, eventContainer.firstChild);
          }
        });
      }
    }
  });
  calendar.render();
});

2. 调整CSS保证标题样式统一 #

添加以下样式，让新增标题和默认标题视觉一致：

.fc-event-title.fc-sticky {
  padding: 2px 4px;
  font-size: 0.85em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff; /* 可根据自身主题调整颜色 */
  background-color: inherit;
}

核心逻辑说明 #

• 通过start.diff(end, 'days')判断事件是否跨2天及以上
• 用querySelectorAll获取事件覆盖的所有日期单元格
• 为非首日的单元格创建标题元素，复用Fullcalendar默认样式类保证风格统一

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