How to change vuetify calendar interval format to 24 hours?

user_10083533 0
Viewed 3870

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

vuetify.js vue.js calendar javascript
2 Answers

Got it.

intervalFormat(interval) {
        return interval.time
    }
user_100835330

Add this to your v-calendar:

 :interval-format="intervalFormat"

Create a new function equal to this:

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