如何在FullCalendar中隐藏跨天事件首日以外的内容？

问题分析 #

静态日历中通过eventContent+eventClassNames实现了跨天事件仅首日显示内容，但开启editable后，拖拽移动事件时会出现其他事件内容消失、再次移动才恢复的问题。原因是编辑模式下事件拖拽会触发日历批量重渲染，原逻辑未正确绑定每次渲染的上下文，导致判断逻辑失效。拆分事件的方案不可行，因为拆分后事件变为独立个体，无法整体编辑。

兼容编辑模式的解决方案 #

方案1：优化eventContent判断逻辑（推荐）

每次渲染事件时，通过info参数里的currentStart（当前渲染日期）和事件本身的start对比，精准判断是否为事件首日，确保拖拽重渲染时逻辑依然有效。

// 配置eventContent
eventContent: function(info) {
  // 对比日期部分，忽略时间
  const isFirstDay = info.currentStart.toDateString() === info.event.start.toDateString();
  if (isFirstDay) {
    return { html: `<div class="event-title">${info.event.title}</div>` };
  } else {
    // 非首日返回空内容，可保留事件占位区域
    return { html: '<div class="event-empty"></div>' };
  }
},

// 搭配eventClassNames区分样式
eventClassNames: function(info) {
  const isFirstDay = info.currentStart.toDateString() === info.event.start.toDateString();
  return isFirstDay ? 'event-first-day' : 'event-other-days';
}

对应的CSS样式：

.event-first-day {
  background-color: #3788d8; /* 首日事件背景色 */
  color: white;
}
.event-other-days {
  background-color: #e9ecef; /* 非首日事件背景色，弱化显示 */
}
.event-empty {
  height: 100%;
  width: 100%;
}

方案2：通过eventDidMount/eventWillUnmount手动控制DOM

如果eventContent的缓存机制仍有问题，可直接操作DOM元素，在事件挂载后判断并隐藏非首日内容：

eventContent: function(info) {
  // 给事件元素绑定起始日期的标识
  return {
    html: `<div class="fc-event-inner" data-event-start="${info.event.start.toISOString().split('T')[0]}">${info.event.title}</div>`
  };
},
eventDidMount: function(info) {
  const currentRenderDate = info.el.closest('.fc-daygrid-day').dataset.date;
  const eventStartDate = info.el.querySelector('.fc-event-inner').dataset.eventStart;
  if (currentRenderDate !== eventStartDate) {
    // 隐藏非首日的事件内容，保留占位
    info.el.querySelector('.fc-event-inner').style.display = 'none';
    info.el.style.backgroundColor = '#e9ecef';
  }
},
eventWillUnmount: function(info) {
  // 清理样式，避免影响后续渲染
  const innerEl = info.el.querySelector('.fc-event-inner');
  if (innerEl) {
    innerEl.style.display = '';
  }
  info.el.style.backgroundColor = '';
}

关键说明 #

• 两种方案均避免了全局状态依赖，每次渲染都基于当前事件的上下文判断，解决了拖拽重渲染时的内容异常问题。
• 无需拆分事件，保持事件的整体性，支持拖拽、调整时长等编辑操作。

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