React中FullCalendar添加横向滚动条解决列名重叠问题求助

核心方案：给日历容器添加横向滚动约束 #

之前的stickyFooterScrollbar和scrollGridPlugin在多资源列场景下失效，本质是FullCalendar默认会让列自适应容器宽度，导致列被挤压重叠。直接通过容器样式+日历内部样式调整来强制横向滚动：

1. 给日历父容器设置固定宽度与滚动属性 #

在React组件中，给包裹FullCalendar的div添加样式约束：

<div style={{ width: '100%', maxWidth: '1200px', overflowX: 'auto' }}>
  <FullCalendar
    plugins={[resourceTimeGridPlugin]}
    initialView="resourceTimeGridDay"
    resources={yourResourceList}
    // 其他日历配置项
  />
</div>

• maxWidth可根据布局需求调整，比如设为100vw或固定像素值
• overflowX: auto会在容器宽度不足时自动触发横向滚动条

2. 调整FullCalendar内部滚动网格的样式 #

如果父容器设置后列仍被挤压，需要覆盖FullCalendar默认CSS，强制资源列保持合理宽度：

/* 全局CSS或组件内样式 */
.fc-scrollgrid {
  min-width: fit-content !important;
}

.fc-resource-time-grid .fc-col-header-cell-cushion {
  white-space: nowrap; /* 防止列名换行，保持单行可读性 */
  padding: 0 8px; /* 调整列名内边距，避免过度拥挤 */
}

.fc-resource-time-grid .fc-col-header-cell {
  min-width: 100px; /* 给每个资源列设置最小宽度，按需调整 */
}

• min-width: fit-content让滚动网格宽度自适应所有列的总宽度，不会被容器压缩
• min-width限制列的最小宽度，避免列被过度挤压导致内容重叠

3. 验证配置 #

确保已正确引入resourceTimeGridPlugin，且没有其他全局样式覆盖上述设置。如果使用CSS Modules，注意提升选择器权重，必要时使用!important强制生效。

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