如何在v-calendar中使用v-slot添加复选框并保留原有模板

当使用v-slot:event自定义模板时，会完全替换v-calendar的默认事件模板。要同时保留原有内容（名称、时间）和新增复选框，你需要在自定义slot中手动渲染默认显示的事件信息，再添加复选框。

示例代码 #

<v-calendar
    v-model="value"
    :weekdays="weekday"
    :type="type"
    :events="events"
    @change="getEvents"
>
    <template v-slot:event="{ event, timed }">
        <!-- 还原默认事件的名称与时间展示 -->
        <div class="v-event-content">
            <div class="v-event-title">{{ event.title }}</div>
            <!-- 仅对定时事件显示时间区间 -->
            <div v-if="timed" class="v-event-time">
                {{ new Date(event.start).toLocaleTimeString() }} - {{ new Date(event.end).toLocaleTimeString() }}
            </div>
        </div>
        <!-- 新增复选框，绑定到事件对象的自定义属性 -->
        <input 
            type="checkbox" 
            v-model="event.checked"
            style="margin-left: 8px;"
        />
    </template>
</v-calendar>

关键说明 #

1. 利用slot参数：event包含你传入的事件数据，timed是Vuetify提供的布尔值，用来区分定时事件和全天事件（全天事件不需要显示时间）。
2. 复用默认样式类：使用v-event-content、v-event-title、v-event-time这些默认类名，能让自定义内容的样式和原生事件保持一致，避免额外的样式调整。
3. 复选框绑定：将复选框的v-model绑定到事件对象的自定义属性（比如checked），需要确保你的events数组中的每个事件对象都初始化了这个属性，或者通过Vue的响应式方法动态添加。

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