Vuetify v3.7.6 v-calendar跨日事件显示异常求助

在Vue3项目中使用Vuetify v3.7.6（当前最新版本），v-calendar组件（实验室阶段）设置跨多日事件（如2024-12-18至2024-12-20）时，月视图下未显示为横跨整个时间段，反而在18日和20日的日期框中显示独立的同名事件，19日无事件显示。想确认是组件本身问题还是配置疏漏。

代码示例：

<v-calendar
  ref="calendarRef"
  v-model="calendarFocus"
  color="primary"
  :weekdays="selectedViewableWeekdayVal"
  :view-mode="selectedViewType"
  :events="calendarEvents"
  hideWeekNumber
  @update:modelValue="refreshCalendarEvents"
  @next="refreshCalendarEvents"
  @prev="refreshCalendarEvents"
>
</v-calendar>

<script setup>
// ... 其他代码
try {
  const response = await axios.get(`/app/dashboard/get-calendar-events`);
  const events = [];
  response.data.forEach(event => {
    events.push({
      title: event.event_title,
      start: DateUtils.convertYMDtoDateObj(event.start_ymd),
      end: DateUtils.convertYMDtoDateObj(event.end_ymd),
      color: 'secondary',
      allDay: true,
    });
  });
  calendarEvents.value = events;
}
// ... 其他代码
</script>

1. 日期格式与结束时间的核心问题 #

Vuetify v-calendar对全天跨日事件的end日期采用“排他”逻辑：即end是事件结束的次日0点，而非事件的最后一天。比如你要覆盖18日至20日全天，end必须设为2024-12-21，而不是2024-12-20。如果end是2024-12-20T00:00:00，组件会判定事件在20日0点已结束，因此只会在18日显示完整事件，20日显示一个结束标记，中间19日无法被覆盖。

检查DateUtils.convertYMDtoDateObj方法，若传入2024-12-20生成的是当日0点的Date对象，就会触发这个问题。

解决方法：转换end日期时自动加一天：

// 修改事件end的处理逻辑
end: new Date(DateUtils.convertYMDtoDateObj(event.end_ymd).getTime() + 24 * 60 * 60 * 1000),

2. 实验室组件的额外配置尝试 #

v-calendar处于实验室阶段，部分跨日渲染逻辑未完全稳定。可以尝试给事件对象添加spanDays: true属性，强制组件渲染跨日效果：

events.push({
  title: event.event_title,
  start: DateUtils.convertYMDtoDateObj(event.start_ymd),
  end: new Date(DateUtils.convertYMDtoDateObj(event.end_ymd).getTime() + 24 * 60 * 60 * 1000),
  color: 'secondary',
  allDay: true,
  spanDays: true // 强制跨日渲染
});

3. 基础配置检查 #

• 确认selectedViewType的值为'month'，视图模式错误会导致渲染异常；
• 检查selectedViewableWeekdayVal是否包含事件日期对应的星期（比如19日是周四，需确保周四在可显示列表中），若日期被排除则不会显示事件。

结论 #

优先排查结束日期的处理逻辑，这是最常见的配置疏漏；调整后仍有问题的话，考虑是实验室组件的固有bug，可以尝试升级Vuetify到后续小版本，或查看官方issue确认是否为已知问题。

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