Vue中FullCalendar资源时间线视图无法显示背景事件

核心问题分析 #

1. 自定义eventContent插槽干扰背景事件渲染：你设置的插槽会对所有事件生效，包括背景事件，但背景事件的渲染逻辑由FullCalendar内部处理，自定义插槽会覆盖它的默认渲染规则，导致背景事件无法显示。
2. 资源匹配规则错误：资源时间线视图中，resourceId: null不会匹配任何资源，需要用*作为通配符匹配所有资源。
3. allDay事件日期格式问题：allDay事件的end需设置为目标日期的次日（左闭右开区间），否则无法覆盖完整的一天。

具体修复步骤 #

1. 限制eventContent插槽仅处理非背景事件 #

修改组件插槽部分，只对非背景事件应用自定义内容：

<FullCalendar :key="calendarKey" v-if="planningOptions" ref="planning" :options="planningOptions" >
  <template v-slot:eventContent="arg">
    <!-- 仅渲染非背景事件的自定义内容 -->
    <div v-if="arg.event.display !== 'background'" :title="arg.event.title">
      {{ arg.event.title }}
    </div>
  </template>
</FullCalendar>

2. 修正背景事件配置 #

调整背景事件的resourceId和end日期：

{
  "allDay": true,
  "start": "2024-01-01", // allDay事件只需日期，无需时间
  "end": "2024-01-02", // 左闭右开，设为次日才能覆盖完整的1号
  "title": "Capodanno",
  "display": "background",
  "resourceId": "*" // 通配符，匹配所有资源
}

3. 确保背景事件样式可见 #

给背景事件的类添加明确样式，避免被其他样式覆盖：

.national-holiday {
  background-color: #f8d7da !important;
  opacity: 0.7;
  pointer-events: none; /* 可选，禁止背景事件的点击事件 */
}

验证逻辑 #

• 先修改插槽，这是背景事件不渲染的直接原因。
• 再调整背景事件的resourceId和日期格式，确保资源匹配和日期范围正确。
• 最后添加样式，保证在资源时间线视图中能清晰看到背景事件。

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