如何删除 Vuetify V-Calendar 中的默认事件名称？

Question

我正在开发一个应用程序，使用 API Rest 作为 back-end 和 Vue.js 作为 front-end。我实现了 Vuetify 框架，并且我正在使用组件 V-Calendar ，它就像一个魅力。但是，有一个错误我无法改正。

在定义从我的 Rest API 中恢复的事件时，我添加了一个名为“name”的属性，它在日历中显示为我的事件的标题。

await this.getSlots();
    const slots = this.$store.getters["slots/getSlotData"];
    let slotEtat = "";

    if (slots != null) {
      for (let i = 0; i < slots.length; i++) {
        let heureDebut = slots[i].dateDebut.substring(11, 16);
        heureDebut = heureDebut.replace(":", "h");
        let heureFin = slots[i].dateFin.substring(11, 16);
        heureFin = heureFin.replace(":", "h");

        if(slots[i].placesLibres > 0) slotEtat = slots[i].placesLibres + " place(s) libre(s)";
        else if(slots[i].placesLibres < 0) slotEtat = "Slot surchargé (" + (Math.abs(slots[i].placesLibres) + slots[i].capacite) + "/" + slots[i].capacite + ")";
        else slotEtat = "Slot complet (" + (Math.abs(slots[i].placesLibres) + slots[i].capacite) + "/" + slots[i].capacite + ")"
                    
        events.push({
          name: heureDebut + " à " + heureFin + " | " + slotEtat,
          start: new Date(slots[i].dateDebut),
          end: new Date(slots[i].dateFin),
          color: this.getColorSlot(slots[i].placesLibres),
          timed: true,
          id: slots[i].id,
          commentaire: "Commentaire : " + slots[i].commentaire,
          isSlot: true
        })
      }
    }

但是，V-Calendar 组件会自动在“name”值前面添加“start”属性，这会在用户界面中产生以下结果：

Result in User Interface

如何防止该数据出现，只保留属性“名称”的值？

感谢您的宝贵时间。

Answer 1

您可以使用 event 插槽来自定义事件的显示方式：

<v-calendar
  ref="calendar"
  color="primary"
  :events="events"
>
  <template #event="event">
     TEST {{ event.timeSummary() }}
  </template>
</v-calendar>

插槽中的“事件”参数是要显示的事件。然后在 template 中你可以提供 html 来显示那些事件:)

如何删除 Vuetify V-Calendar 中的默认事件名称？

How to remove default event name in Vuetify V-Calendar?

vue.js

vuetify.js