如何在FullCalendar v6.1.8中固定timeslots显示高度？

可以通过CSS强制固定每个timeslot的高度，无视slotDuration的设置，具体实现如下：

核心CSS代码 #

/* 固定每个时段容器的高度 */
.fc-timegrid-slot {
  height: 40px !important; /* 自定义你需要的固定高度 */
  min-height: 40px !important;
}

/* 确保时段框架填满容器高度 */
.fc-timegrid-slot-frame {
  height: 100% !important;
}

/* 同步调整左侧时间标签的行高与高度，保证对齐 */
.fc-timegrid-slot-label {
  height: 40px !important;
  line-height: 40px !important;
}

说明 #

1. 使用!important是为了覆盖FullCalendar生成的内联样式（默认会根据slotDuration动态计算高度）
2. 修改height的值即可自定义时段的固定大小，比如改成50px，无论切换15/30/60分钟的时段，每个slot都会保持这个高度
3. 如果存在样式冲突，可以给选择器增加父类限定提升优先级，例如：.fc-timegrid-view .fc-timegrid-slot

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