24 小时格式的 Vuetify 日历事件时间答案

【问题标题】：Vuetify Calendar Event time in 24 hour format24 小时格式的 Vuetify 日历事件时间
【发布时间】：2020-11-12 07:18:27
【问题描述】：

我正在使用 Vuetify 日历来显示事件。

活动时间以上午/下午格式显示。但我需要 24 小时格式的。我正在尝试使用事件槽显示事件详细信息。

 <v-calendar
        ref="calendar"
        v-model="value"
        locale="en"
        color="primary"
        type="week"
        :events="events"
        :event-color="getEventColor"
        :event-ripple="false"
        @change="getEvents"
        @click:event="showEvent"
        :weekdays="weekday"
        :interval-format="intervalFormat"
      >
        <template v-slot:event="{ event, timed, eventSummary,  }">
          <div class="v-event-draggable" v-html="eventSummary()" ></div>
        </template>
      </v-calendar>

【问题讨论】：

标签： vuetify.js

【解决方案1】：

eventSummary 方法使用配置的语言环境来显示时间。因此，您可以自己生成 html，而不是使用它。

我创建了函数 formatEventTime 以将时间格式化为 24 小时制。

methods: {
  formatEventTime(date) {
    return new Date(date).toLocaleTimeString('en-US', {
      hour: "2-digit", 
      minute: "2-digit", 
      hour12: false
    })
  }
}

您的日历组件如下所示：

<v-calendar
  ref="calendar"
  v-model="value"
  locale="en"
  color="primary"
  type="week"
  :events="events"
  :event-color="getEventColor"
  :event-ripple="false"
  @change="getEvents"
  @click:event="showEvent"
  :weekdays="weekday"
  :interval-format="intervalFormat"
  >
  <template v-slot:event="{ event }">
    <div class="v-event-draggable">
      <strong>{{ event.name }}</strong><br>
      {{ formatEventTime(event.start) }} - {{ formatEventTime(event.end) }}
    </div>
  </template>
</v-calendar>

【讨论】：