Fullcalendar日程事件被水平挤压问题的解决方法咨询

这个问题的核心原因是FullCalendar默认的事件排列逻辑：同一时间范围内只要存在重叠的事件，系统会按该范围内的最大重叠事件数平分列宽，不会因为部分事件时长较短就动态调整上方/下方事件的宽度。你截图中8点的4个事件与9点的半小时事件存在时间交叉，系统默认按最大重叠数5平分列宽，导致8点的事件被挤压。

可用解决方案 #

方案1：调整内置配置 #

• 配置eventMaxStack参数，限制同一时间点最大堆叠的事件数量，避免无意义的宽度平分，示例配置：

  // V5/V6版本通用
  const calendar = new FullCalendar.Calendar(calendarEl, {
    // 其他配置...
    eventMaxStack: 4, // 可根据你的列宽调整，最多堆叠4个事件，超出则折叠
    slotEventOverlap: false // 关闭非完全重叠事件的堆叠判定
  });
  

• 该方案无需额外自定义逻辑，适配绝大多数场景。

方案2：自定义事件宽度计算逻辑 #

如果内置配置不符合需求，可以通过eventDidMount钩子手动计算并调整事件宽度：

eventDidMount: function(info) {
  const currentEvent = info.event;
  const allEvents = info.view.calendar.getEvents();
  // 统计和当前事件完全重叠的事件数量
  let realOverlapCount = 0;
  allEvents.forEach(ev => {
    if (ev.start < currentEvent.end && ev.end > currentEvent.start) {
      realOverlapCount++;
    }
  });
  // 按实际重叠数分配宽度
  const containerWidth = info.el.parentElement.clientWidth;
  info.el.style.width = `${(containerWidth / realOverlapCount) - 4}px`;
  info.el.style.minWidth = '70px'; // 避免过度挤压
}

方案3：添加CSS最小宽度限制 #

直接通过全局CSS限制事件的最小宽度，避免挤压到无法阅读：

.fc-timegrid-event, .fc-daygrid-event {
  min-width: 75px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

问题截图参考 #

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