【问题标题】: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>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2016-05-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-07-21
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多