vue.jsvuetify.js

Vuetify <v-calendar>: Unable to detect Next/Previous Button Click


I am using Vurtify VCalendar in my Laravel Vue project. I am using vue version 3.5.13 and vuetify version 3.7.5

This is my calendar component:

<div id="calendarDiv">
      <v-calendar
        ref="calendar"
        v-model="value"
        :events="events"
        :view-mode="type"
        :weekdays="weekday"
        @next="nextClicked()"
        @next:click="nextClicked()"
        @click:next="nextClicked()"
        @click:event="showEvent"
        @click:date="viewDay"
        @change="onChange"
      />
</div>

I load initial events in the calendar through mounted() hook:

mounted()
  {
    this.$nextTick(() => {
      this.loadCalendar();
    });
  },

loadCalendar() makes an AJAX call and updates this.events and I see the initial events on the calendar. So far so good.

However, I am unable to detect clicking of the Next or Previous button. As per documentation, next and prev events are available. Many samples on the internet, including chatGPT and Gemini suggest using the change event. However, it does not work for me. The only event that works for me is click.

I can't figure out why I am unable to detect clicking of the Next and Previous buttons.

Can anyone suggest how to fix the issue? (At least AI could not help me! Haha!)

Update: Here is link to VuetifyPlay where Next and Previous buttons don't work.


Solution

  • The documentation is imprecise, this can be expected for an experimental component, which Calendar is.

    The component modifies a model on click and doesn't emit any other events. So the only handler that works is @update:model-value="changed". Since v-model is already used on the component, the conventional way to listen to value changes is a watcher:

    watch: {
      value() {
        this.changed()
      }