Vuetify v-calendar整点时间显示缩写问题求助

针对v-calendar默认将整点时间（如12:00）缩写为12的问题，有两种直接的解决方案：

方法一：使用内置格式化属性强制统一格式 #

直接在v-calendar组件上添加event-time-format属性，指定固定的时间格式，覆盖组件默认的缩写逻辑：

<v-calendar
  :events="yourEventsData"
  event-time-format="HH:mm"
></v-calendar>

如果需要12小时制带AM/PM标识，可将格式设为'h:mm a'，设置后所有时间都会按照指定格式完整显示，不再区分是否为整点。

方法二：自定义事件插槽完全控制显示 #

如果需要更灵活的样式或逻辑，可通过v-slot:event自定义事件内容，手动格式化时间：

<v-calendar :events="yourEventsData">
  <template v-slot:event="{ event }">
    <div class="custom-event">
      <span>{{ formatTime(event.start) }}</span>
      <span class="event-title">{{ event.title }}</span>
    </div>
  </template>
</v-calendar>

<script>
export default {
  methods: {
    formatTime(date) {
      // 兼容字符串格式的时间，先转为Date对象
      const eventDate = typeof date === 'string' ? new Date(date) : date;
      const hours = String(eventDate.getHours()).padStart(2, '0');
      const minutes = String(eventDate.getMinutes()).padStart(2, '0');
      return `${hours}:${minutes}`;
    }
  }
}
</script>

这种方式可以完全自定义时间的显示样式和格式，适合有个性化需求的场景。

内容的提问来源于stack exchange，提问作者Ewerton Siqueira Costa