Fullcalendar.io resourceTimeline视图如何设置事件高度填满时隙

问题背景 #

• 适用场景：FullCalendar resourceTimeline视图，Y轴展示资源、X轴展示时间，每个时隙内仅存在1个事件
• 预期效果：事件高度完全填充所在时隙的全部空白区域，完整覆盖对应阴影空间
• 已尝试方案：配置eventMinHeight: 25，该属性仅对TimeGrid视图生效，未达到预期

具体实现步骤 #

1. 基础JS配置调整 #

首先在日历初始化配置中添加以下参数，固定行高渲染逻辑：

const calendar = new FullCalendar.Calendar(calendarEl, {
  // 其他原有配置...
  initialView: 'resourceTimelineDay', // 替换为你实际使用的timeline视图
  expandRows: true, // 强制所有资源行高度撑满可用容器空间，避免行高被内容压缩
  slotEventOverlap: false, // 单事件场景下关闭事件重叠，避免事件自动偏移预留边距
})

说明：eventMinHeight 仅对垂直排布事件的TimeGrid类视图生效，resourceTimeline属于水平时间轴视图，事件垂直高度由资源行高、事件默认边距共同控制，该参数不会作用于此视图。

2. 覆盖默认CSS样式 #

FullCalendar默认给timeline视图的事件添加了上下外边距，导致事件无法填满行高，添加以下全局样式重置即可：

/* 重置timeline事件定位与边距，撑满整行高度 */
.fc .fc-timeline-event {
  margin: 0 !important;
  top: 0 !important;
  height: 100% !important;
  border-radius: 0; /* 可选：需要完全贴合单元格时可去掉默认圆角 */
}
/* 调整事件内容内边距，保证文字垂直居中 */
.fc .fc-timeline-event .fc-event-main {
  padding: 0 4px !important;
  height: 100%;
  display: flex;
  align-items: center;
}

适配注意事项 #

• FullCalendar v5及以上版本可直接使用上述类名，v4及更早版本需要对应调整旧版类名规则
• 配置资源分组场景下，子资源行的事件会自动继承上述样式，无需额外配置
• 如果自定义了resourceRowHeight参数，上述样式依然生效，事件会自动匹配设置的行高

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