Fullcalendar resourceTimelineWeek视图如何实现事件并排显示？

核心实现方案 #

FullCalendar默认会在同一资源的同一时间段堆叠事件，要实现并排效果，无需合并事件，可通过自定义事件渲染逻辑和样式调整来实现，以下是具体可行方法：

1. 用eventContent自定义事件布局（推荐） #

通过FullCalendar的eventContent回调，手动计算同一时间段内事件的数量，平分宽度并设置偏移，实现并排：

<FullCalendar
  :options="calendarOptions"
/>

<script setup>
import { ref } from 'vue'
import FullCalendar from '@fullcalendar/vue3'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'

const calendarOptions = ref({
  plugins: [resourceTimelinePlugin],
  initialView: 'resourceTimelineWeek',
  resources: [/* 你的资源数据数组 */],
  events: [/* 你的事件数据数组 */],
  eventContent: (info) => {
    // 筛选当前资源、同一时间段内的所有事件
    const sameSlotEvents = info.view.getCurrentEvents().filter(event => 
      event.resourceId === info.event.resourceId &&
      event.start.isSame(info.event.start, 'hour') && // 可根据需求调整时间粒度（day/hour等）
      event.end.isSame(info.event.end, 'hour')
    )
    const eventCount = sameSlotEvents.length
    // 计算单事件宽度和偏移量
    const singleWidth = `${100 / eventCount}%`
    const eventIndex = sameSlotEvents.findIndex(e => e.id === info.event.id)
    const offsetLeft = `${eventIndex * (100 / eventCount)}%`

    // 返回自定义事件DOM
    return {
      html: `
        <div style="position:absolute; left:${offsetLeft}; width:${singleWidth}; height:85%; margin-top:3px; background:#2573c7; color:#fff; padding:2px 4px; border-radius:2px; overflow:hidden;">
          ${info.event.title}
        </div>
      `
    }
  },
  eventDidMount: (info) => {
    // 让事件容器支持绝对定位
    info.el.style.position = 'relative'
  }
})
</script>

2. 覆盖默认样式适配布局 #

FullCalendar默认事件样式有内边距和固定高度，需要调整CSS确保并排效果正常：

.fc-event {
  height: 100% !important;
  padding: 0 !important;
  border: none !important;
}
.fc-event-main {
  height: 100%;
}

3. 进阶：利用分组配置简化逻辑 #

如果你的事件有明确的分组标识（比如groupId字段），可以开启FullCalendar的分组功能自动并排：

calendarOptions.value = {
  // ...其他配置
  eventGrouping: true,
  eventGroupBy: 'groupId',
  eventGroupSort: (groupA, groupB) => groupA.title.localeCompare(groupB.title)
}

这种方式适合有明确分组规则的场景，灵活性不如自定义渲染，但实现更简洁。

注意事项 #

• 时间粒度的判断要和业务需求匹配，比如跨小时/跨天事件需调整isSame的参数。
• 测试多数量并排场景（2个、3个及以上事件），确保宽度计算无偏差。
• 自定义渲染时要考虑响应式适配，避免小屏幕下内容挤压。

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