FullCalendar React时间网格视图：如何让左侧时间列高度随事件自适应？

问题描述 #

在使用FullCalendar React的timegrid（时间网格）视图时，希望左侧时间列能根据事件高度自适应扩展（如附图所示），而非采用固定高度，请问是否有可行的实现方法？

可行实现方法 #

1. 自定义CSS覆盖默认样式 #

FullCalendar的时间列默认采用固定高度，通过覆盖核心CSS类可以实现自适应：

/* 移除时间列的固定高度限制，跟随内容高度扩展 */
.fc-timegrid-axis {
  height: auto !important;
  min-height: 100%;
}

/* 让时间网格容器自适应事件总高度 */
.fc-timegrid-body {
  height: auto !important;
}

/* 调整事件容器定位，确保高度能被正确计算 */
.fc-timegrid-event-harness {
  position: static !important;
}

2. 事件回调中动态计算高度 #

如果CSS调整无法满足需求，可借助FullCalendar的事件回调，在事件加载完成后动态设置时间列高度：

import FullCalendar from '@fullcalendar/react';
import timeGridPlugin from '@fullcalendar/timegrid';

const CustomCalendar = () => {
  const adjustTimeAxisHeight = () => {
    const timeAxis = document.querySelector('.fc-timegrid-axis');
    const eventBody = document.querySelector('.fc-timegrid-body');
    if (timeAxis && eventBody) {
      timeAxis.style.height = `${eventBody.offsetHeight}px`;
    }
  };

  return (
    <FullCalendar
      plugins={[timeGridPlugin]}
      initialView="timeGridWeek"
      events={[
        { title: '跨时段长事件', start: '2024-05-20T09:00:00', end: '2024-05-20T17:30:00' }
      ]}
      // 事件加载完成后触发调整
      eventsSet={adjustTimeAxisHeight}
      // 窗口大小变化时重新调整
      windowResize={adjustTimeAxisHeight}
    />
  );
};

export default CustomCalendar;

3. 注意事项 #

• 优先使用具体CSS选择器而非!important，避免影响其他组件样式；
• 若使用响应式布局，需监听窗口 resize 事件重新计算高度；
• 不同FullCalendar版本的DOM类名可能略有差异，需根据实际DOM结构调整选择器。

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