Is the calendar's updateTimes method available in Vuetify 3?

[stummjr]

I used to use v-calendar with Vuetify 2 and I'm now migrating the project to Vuetify 3.

The codebase calls $refs.calendar.updateTimes(), but I can't find that method in the API docs for v3: https://vuetifyjs.com/en/api/VCalendar/

The example here still uses updateTimes, but it's now called via calendar.value.updateTimes(). That does not seem to work for me, since value is not defined in the calendar instance. Perhaps I am missing something.

I am using Vuetify 3.10.2, and this is how the original Vuetify 2 code used to look like:

  mounted() {
    ...
    this.updateTime = setInterval(() => {
      if (this.$refs.calendar) {
        this.$refs.calendar.updateTimes()
      }
    }, 60 * 1000)
    ...
  }

That code errors with Vuetify 3:

Uncaught TypeError: this.$refs.calendar.updateTimes is not a function

Is there a replacement for updateTimes?

Thanks in advance!

[mg1986jp]

updateTimes doesn't exist on VCalendar in Vuetify 3. The v2 calendar was a completely different component — the v3 rewrite dropped several internal methods including that one.

In Vuetify 2, updateTimes was used to refresh the "current time" indicator line. In v3, the calendar doesn't expose that method because it handles time updates differently internally.

If you need to force the current-time indicator to update (e.g. move the "now" line every minute), you can force a re-render of the calendar by toggling its key:

<template>
  <v-calendar ref="calendar" :key="calendarKey" />
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const calendarKey = ref(0)
let interval

onMounted(() => {
  interval = setInterval(() => {
    calendarKey.value++
  }, 60 * 1000)
})

onBeforeUnmount(() => clearInterval(interval))
</script>

Not the most elegant solution, but it works. The key change forces Vue to destroy and recreate the component, which recalculates the current time position.

What version of Vuetify 3 are you on? The calendar component went through significant changes — if you're on 3.10.x you might also want to check if 3.7+ (where VCalendar was reintroduced) has any relevant updates in the changelog.

[J-Sek]

fixed in v3.11.0 (c77d2b3)