CODEWITHSUNDEEP
vuetify.js
Balaji Kartheeswaran
Balaji Kartheeswaran

Reputation: 1098

Vuetify Calendar Event time in 24 hour format

I'm using Vuetify Calendar to display events.

The event time is displayed in am/pm format. But I need them in 24 hour format. I'm trying to display the event details using the event slot.

 <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>

Calendar displays event time in am/pm format

Upvotes: 1

Views: 2266

Answers (1)

Jay Fridge
Jay Fridge

Reputation: 1057

The eventSummary method uses the configured locale to display the time. So instead of using that you could generate the html yourself.

I created the function formatEventTime to format the time in a 24-Hour format.

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

Your calendar component would look like this:

<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>

Upvotes: 3

Related Questions