I'm using vuetify calendar with type week and it shows time in 12 hour format with AM and PM. How do i change that to 24 hour format?

I looked at the documentation and didn't find much, except that u can pass interval-format prop that expects a function. Also found a function at vuetify github.

    <v-calendar
                :now="today"
                :value="today"
                color="primary"
                locale="et"
                type="week"
                :interval-format="intervalFormat"
            >
            </v-calendar>

methods: {
        intervalFormat() {
            const longOptions = { timeZone: 'UTC', hour12: true, hour: '2-digit', minute: '2-digit' }
            const shortOptions = { timeZone: 'UTC', hour12: true, hour: 'numeric', minute: '2-digit' }
            const shortHourOptions = { timeZone: 'UTC', hour12: true, hour: 'numeric' }

            return longOptions
        }
    }

I wanted 24 hour format but it's still 12 hour format

I'm using vuetify calendar with type week and it shows time in 12 hour format with AM and PM. How do i change that to 24 hour format?

I looked at the documentation and didn't find much, except that u can pass interval-format prop that expects a function. Also found a function at vuetify github.

    <v-calendar
                :now="today"
                :value="today"
                color="primary"
                locale="et"
                type="week"
                :interval-format="intervalFormat"
            >
            </v-calendar>

methods: {
        intervalFormat() {
            const longOptions = { timeZone: 'UTC', hour12: true, hour: '2-digit', minute: '2-digit' }
            const shortOptions = { timeZone: 'UTC', hour12: true, hour: 'numeric', minute: '2-digit' }
            const shortHourOptions = { timeZone: 'UTC', hour12: true, hour: 'numeric' }

            return longOptions
        }
    }

I wanted 24 hour format but it's still 12 hour format

• javascript
• vue.js
• calendar
• vuetify.js

2 Answers 2

Got it.

intervalFormat(interval) {
        return interval.time
    }

Add this to your v-calendar:

 :interval-format="intervalFormat"

Create a new function equal to this:

  intervalFormatter(locale, getOptions) {
     return locale.time;
  }