Full Calendar周视图：实现同时间段事件上下排列并拉伸行高

可以实现需求，核心要结合FullCalendar的配置项+CSS调整，你之前的CSS没生效是因为没改事件的排列规则，下面是具体解决方法：

第一步：修改FullCalendar初始化配置，强制事件垂直堆叠 #

先通过配置关闭事件重叠显示，让同时间段事件自动上下排列：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek',
    slotEventOverlap: false, // 关闭事件重叠，强制垂直排列
    eventDisplay: 'block', // 事件以块级元素显示
    slotDuration: '00:30:00', // 可根据需求设置基础时间槽的间隔
    // 你的其他日历配置...
  });
  calendar.render();
});

第二步：用CSS调整容器高度，确保标题正常显示 #

取消事件的绝对定位，让它们在文档流中排列，同时拉伸时间槽高度适配事件数量：

/* 重置事件容器定位，让事件按正常流上下排列 */
.fc-timegrid-event-harness {
  position: static !important;
  width: 100% !important;
  margin-bottom: 4px; /* 事件间留少量间距，避免拥挤 */
}

/* 设置单个事件最小高度，保证标题能显示，允许标题换行 */
.fc-timegrid-event {
  min-height: 40px !important;
  white-space: normal;
}

/* 让时间槽高度自动适应堆叠的事件，同时设置最小行高避免过矮 */
.fc-timegrid-slots td {
  height: auto !important;
  min-height: 120px;
}

补充说明 #

你之前的CSS只调整了事件容器的样式，但FullCalendar默认用绝对定位来横向排列重叠事件，所以必须先通过slotEventOverlap: false关闭重叠规则，再配合CSS重置定位，才能让事件上下堆叠，同时时间槽高度设为auto后，会自动根据事件数量拉伸行高。

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