Vuetify <v-calendar>事件插槽周模式失效问题求助

你遇到的问题是Vuetify v-calendar的#event插槽仅在月视图生效，周视图不触发。这不是Bug，是组件在不同视图模式下使用了不同的插槽名称导致的。

解决方法 #

周/日视图需要使用#day-event插槽，同时保留#event插槽适配月视图，修改后的代码如下：

<v-calendar
  ref="calendar"
  v-model="value"
  :disabled="isLoading|| (adminUser && noUserOrClientSelected)"
  :events="events"
  :view-mode="type"
  :weekdays="weekday"
  :intervals="12"
  :interval-start="6"
  @update:model-value="UpdateModelValue"
>
  <!-- 月模式事件插槽 -->
  <template #event="{ event }">
    <div> {{ event.customer_name }} - {{ event.title }}</div>
  </template>
  <!-- 周/日模式事件插槽 -->
  <template #day-event="{ event }">
    <div> {{ event.customer_name }} - {{ event.title }}</div>
  </template>
</v-calendar>

原因说明 #

Vuetify 3的v-calendar针对不同视图设计了独立的事件插槽：

• 月视图（month）：使用event插槽渲染日历格子里的事件
• 周/日视图（week/day）：使用day-event插槽渲染时间轴上的事件

两种视图的事件渲染结构不同，因此需要对应不同的插槽名称。修改后切换到周模式，自定义的事件内容就能正常显示了。

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