Fullcalendar timeGridWeek：如何设置行高自适应并对齐条目顶部？

核心调整思路 #

• 解除事件容器的固定高度限制，允许自定义内容撑开高度
• 精准设置事件的start属性为7:00，实现顶部对齐
• 覆盖FullCalendar默认样式，取消内容截断和固定定位约束

具体配置与代码实现 #

1. 日历初始化配置 #

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek',
    events: [
      {
        start: '2024-05-20T07:00:00', // 强制事件起始于7点
        end: '2024-05-20T07:00:00', // 取消默认时长高度，靠内容撑开
        extendedProps: {
          customHtml: '<div class="custom-event">这里放你的自定义HTML内容，支持多行、复杂结构</div>'
        }
      }
    ],
    eventContent: info => ({ html: info.event.extendedProps.customHtml }),
    eventMinHeight: 0, // 允许事件高度最小为0
    eventMaxHeight: 'auto' // 开启高度自适应
  });
  calendar.render();
});

2. 自定义CSS样式 #

/* 解除事件容器的固定高度限制 */
.fc-timegrid-event-harness {
  height: auto !important;
  min-height: unset !important;
}

/* 让事件元素自适应内容高度，顶部对齐 */
.fc-timegrid-event {
  height: auto !important;
  position: static !important;
  top: 0 !important;
}

/* 允许内容溢出容器，避免截断 */
.fc-event-main {
  overflow: visible !important;
}

/* 自定义内容的基础样式（可按需调整） */
.custom-event {
  padding: 8px 12px;
  background-color: #3788d8;
  color: #fff;
  border-radius: 4px;
}

注意事项 #

• 若需要保留事件的时间范围（比如从7点到9点），只需将end属性设为对应时间即可，上述CSS仍会让内容撑开超出默认高度的部分
• 不同FullCalendar版本的类名可能略有差异，若样式不生效，可通过浏览器开发者工具查看事件元素的实际类名进行调整
• 自定义HTML内容不要设置固定高度，确保其能自然撑开容器

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