You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

FullCalendar:为resourceTimeline每行添加底部额外空间的问题

解决FullCalendar ResourceTimeline视图行底额外空间问题

直接设置.fc-timeline-lane-frame的固定高度会打乱资源行的内部布局逻辑,导致显示错乱。推荐通过调整行内元素的内边距或外边距来实现需求,同时保证原有布局不受影响:

方案1:给资源行添加底部内边距

这是最简单的方式,直接为每个资源行增加底部空白:

.fc-timeline-lane {
  padding-bottom: 20px; /* 按需调整数值 */
}

方案2:给行内容容器添加底部外边距

如果希望仅内容区域下方留空,可针对内容容器设置:

.fc-timeline-lane-content {
  margin-bottom: 20px; /* 按需调整数值 */
}

优化点击区域(可选)

如果需要让新增的底部空白区域也能触发事件创建,可同步调整背景区域的高度,确保点击范围覆盖空白:

.fc-timeline-lane {
  padding-bottom: 20px;
}
.fc-timeline-lane-bg {
  height: calc(100% + 20px);
  margin-bottom: -20px;
}

这些方法都是在FullCalendar原有布局结构上做扩展,不会破坏内部元素的自适应定位,能稳定实现你想要的行底空白效果。

内容的提问来源于stack exchange,提问作者Xavier Patiño

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.27 04:04:57