FullCalendar设置eventOverlap=false后事件仍重叠问题求助

问题核心 #

你设置的eventOverlap={false}和selectOverlap={false}在月视图（dayGridMonth）中，默认只作用于带有具体时间段（start/end）的事件，而非仅指定date的纯日期事件。这类纯日期事件在月视图单元格内默认是堆叠显示的，eventOverlap不会阻止这种堆叠行为。

具体解决方法 #

1. 给事件添加时间段，让eventOverlap生效

如果你的事件有明确的时间范围，给每个事件添加start和end（或duration），这样FullCalendar会识别为时间段事件，eventOverlap=false会自动阻止它们重叠：

events={[
  ...listLunnarDate,
  { title: 'event 2', start: '2024-04-04T09:00:00', end: '2024-04-04T10:00:00', overlap: false },
  { title: 'event 2', start: '2024-04-04T10:00:00', end: '2024-04-04T11:00:00', overlap: false },
  { title: 'event 2', start: '2024-04-04T11:00:00', end: '2024-04-04T12:00:00', overlap: false },
]}

2. 限制同一日期的事件显示数量

如果不需要时间段，只想控制同一日期内的事件不堆叠，可以使用dayMaxEvents或dayMaxEventRows配置，超出数量的事件会自动折叠：

<FullCalendar
  // ...其他配置
  dayMaxEvents={1} // 每个日期单元格最多显示1个事件
  dayMaxEventRows={1} // 按行限制显示数量
  eventOverlap={false}
/>

3. 自定义CSS强制事件不堆叠

如果需要完全自定义布局，通过CSS修改事件的定位方式，避免堆叠（注意配合调整单元格高度）：

/* 取消事件的绝对定位，改为流式布局 */
.fc-daygrid-event {
  position: static !important;
  margin: 2px 0 !important;
  width: 100% !important;
}

/* 让单元格高度自动适应内容，替代固定高度 */
.fc .fc-daygrid-day-frame{
  height: auto !important;
  min-height: 6rem;
}

额外检查 #

你当前设置的.fc .fc-daygrid-day-frame{height:6rem;}是固定高度，会限制单元格可容纳的事件空间，容易导致堆叠。如果采用方法3，建议改为height:auto并设置最小高度，保证单元格能根据内容扩展。

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