Vuetify Calendar如何设置每日仅显示1条事件其余以+n形式展示

Vuetify Calendar 原生未提供该配置项，可通过自定义日单元格插槽实现需求，具体实现如下：

1. 核心实现逻辑 #

• 用v-calendar提供的插槽覆盖默认的事件渲染逻辑，月视图下使用#day-body插槽
• 对每个日期对应的事件数组做截断，仅保留前1条展示
• 计算剩余事件数量，大于0时在单元格底部展示「+n 更多事件」提示

2. 完整代码示例 #

<template>
  <v-calendar
    v-model="currentDate"
    :events="events"
    view="month"
  >
    <!-- 自定义月视图每日单元格内容 -->
    <template #day-body="{ date, events }">
      <!-- 展示第一条事件 -->
      <div v-if="events.length" class="single-day-event">
        {{ events[0].title }}
      </div>
      <!-- 展示更多事件提示 -->
      <div v-if="events.length > 1" class="more-event-tip">
        +{{ events.length - 1 }} 更多事件
      </div>
    </template>
  </v-calendar>
</template>

<script setup>
import { ref } from 'vue'
// 当前选中日期
const currentDate = ref(new Date())
// 日程事件列表，可根据业务需求替换为接口返回数据
const events = ref([
  { title: '团队周会', start: new Date(), end: new Date() },
  { title: '需求评审', start: new Date(), end: new Date() },
  { title: '代码走查', start: new Date(), end: new Date() }
])
</script>

<style scoped>
.single-day-event {
  font-size: 12px;
  background: #1976d2;
  color: #fff;
  padding: 2px 4px;
  border-radius: 2px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.more-event-tip {
  font-size: 11px;
  color: #666;
  text-align: right;
  cursor: pointer;
}
</style>

3. 扩展说明 #

• 如果使用Vuetify2，插槽名对应调整为#day即可，逻辑完全一致
• 若要点击「更多事件」弹出全量事件列表，可给more-event-tip元素绑定点击事件，配合v-dialog/v-menu组件展示当前日期的所有事件
• 如果需要适配周/日视图，对应替换为对应视图的插槽即可，比如周视图用#weekday-body插槽

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