Vue3中FullCalendar周视图事件分组及dateclick功能异常求助

核心方案：基于Resource Timeline视图改造 #

直接用resourceTimelineWeek视图，把事件组映射为FullCalendar的"资源"，通过配置隐藏资源列、去掉时间段，再修复dateClick触发逻辑，比自定义视图更简便。

1. 基础配置与数据结构 #

• 事件数据需添加resourceId字段，关联对应的分组ID
• 自动从事件数据中提取分组作为资源，避免手动维护资源列表

示例代码：

<template>
  <FullCalendar
    ref="calendarRef"
    :plugins="plugins"
    :initial-view="initialView"
    :events="events"
    :resources="resources"
    :header-toolbar="headerToolbar"
    :slot-duration="slotDuration"
    :slot-label-format="slotLabelFormat"
    :resource-area-width="resourceAreaWidth"
    :selectable="true"
    @date-click="handleDateClick"
  />
</template>

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

// 引入所需插件
const plugins = [resourceTimelinePlugin]
const initialView = 'resourceTimelineWeek'
const calendarRef = ref(null)

// 模拟事件数据：每个事件通过resourceId绑定分组
const events = ref([
  { id: '1', title: '组A事件1', start: '2024-05-20', resourceId: 'groupA' },
  { id: '2', title: '组A事件2', start: '2024-05-22', resourceId: 'groupA' },
  { id: '3', title: '组B事件1', start: '2024-05-21', resourceId: 'groupB' },
  { id: '4', title: '组C事件1', start: '2024-05-23', resourceId: 'groupC' },
])

// 自动从事件中提取分组，生成资源列表
const resources = computed(() => {
  const groupIds = [...new Set(events.value.map(e => e.resourceId))]
  return groupIds.map(id => ({ id, title: id }))
})

// 视图配置：隐藏时间相关元素、调整工具栏
const headerToolbar = {
  left: 'prev,next today',
  center: 'title',
  right: ''
}
const slotDuration = '1day' // 每个时间槽对应一天
const slotLabelFormat = false // 隐藏左侧时间段标签
const resourceAreaWidth = '0px' // 隐藏左侧资源列

// dateClick事件：点击日期列任意位置触发，直接获取目标日期
const handleDateClick = (info) => {
  const targetDate = info.date.toISOString().split('T')[0]
  console.log('点击的日期:', targetDate)
  // 这里写入你的业务逻辑
}
</script>

<style scoped>
/* 优化样式：让分组行边界更清晰 */
:deep(.fc-resource-timeline-table .fc-resource-row) {
  border-bottom: 1px solid #eee;
}
/* 确保日期单元格可点击 */
:deep(.fc-daygrid-day) {
  cursor: pointer;
}
</style>

2. 关键配置说明 #

• resourceAreaWidth: '0px'：直接隐藏左侧资源列，只保留日期列和分组行
• slotDuration: '1day'：将时间槽设置为一天，匹配周视图只展示日期的需求
• slotLabelFormat: false：彻底隐藏左侧时间段标签
• 自动生成resources：通过computed从事件数据中提取分组ID，无需手动维护资源列表，简化配置
• dateClick事件：无论点击哪个分组行的日期列，info.date都会返回对应的目标日期，直接使用即可

3. 可选优化 #

• 若需显示分组名称，可将resourceAreaWidth设为合适宽度（如100px），左侧会展示分组标题
• 给不同分组行添加背景色，增强视觉区分度

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