React中@fullcalendar/resource-timeline@4.3.0灰色空白区域如何移除？

灰色区域是什么？ #

你看到的灰色空白区域是FullCalendar Resource Timeline v4的默认时间轴空白背景——当视图中没有添加任何事件数据时，组件会用灰色填充时间轴的可调度区域；另外也可能是未配置资源分组导致的占位空白，或是视图高度未固定产生的多余留白。

移除方法 #

1. 隐藏无事件时的灰色背景 #

通过自定义CSS覆盖默认样式：

/* 移除时间轴灰色背景 */
.fc-resource-timeline .fc-content-skeleton {
  background-color: transparent !important;
}
.fc-resource-timeline .fc-bg {
  display: none;
}

2. 固定视图高度，避免多余留白 #

给FullCalendar组件添加height属性，限定视图整体高度：

<FullCalendar
  defaultView="resourceTimelineDay"
  plugins={[timelinePlugin]}
  schedulerLicenseKey={my key}
  height="600px" // 自定义合适高度
  resourceColumns={[
    { labelText: 'Room', field: 'title' },
    { labelText: 'Occupancy', field: 'occupancy' },
  ]}
  resources={[
    { id: 'a', title: 'Auditorium A', occupancy: 40 },
    { id: 'b', title: 'Auditorium B', occupancy: 60 },
    { id: 'c', title: 'Auditorium C', occupancy: 40 },
    ...
  ]}
/>

3. 调整资源列配置，消除占位空白 #

如果是左侧资源列旁的空白，可给resourceColumns指定宽度，避免自动拉伸产生留白：

resourceColumns={[
  {
    labelText: 'Room',
    field: 'title',
    width: '160px'
  },
  {
    labelText: 'Occupancy',
    field: 'occupancy',
    width: '100px'
  },
]}

4. 禁用不必要的资源分组 #

若存在空分组导致的空白，添加resourceGroupField=""禁用分组：

<FullCalendar
  // 其他配置...
  resourceGroupField=""
/>

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