Moving a Vuetify calendar one from forward from a child/partner component?

Question

The Vuetify calendar uses the following to navigate:

@click="$refs.calendar.prev()" @click="$refs.calendar.next()"

These commands work if you have them in the same file as the calendar. I'm using the bottom (last) instance of the calendar from the Vuetify docs, but I want the side panel (which I'm using as a Change Log as the calendar will be used for changing a diary/planner). $refs.calendar doesn't work in that component. I tried passing down the reference to the child component but $refs just comes through as undefined.

How can I move the calendar forward one month from a child component?

Answer 1

You can use custom events.

In your parent component, you call your child component, i called it CalendarNav. Inside, you'll have your calendar navigation buttons. You bind 2 events to it, previousMonth and nextMonth. When your parent component will receive prevMonth or nextMonth events, it will execute function passed to it.

<CalendarNav @prevMonth="$refs.calendar.prev()" @nextMonth="$refs.calendar.next()" />

and in you child component CalendarNav, you emit events when buttons are clicked, like this :

<v-btn @click="$emit('nextMonth')">
    Next
    <v-icon
      right
      dark
    >
      keyboard_arrow_right
    </v-icon>
  </v-btn>

and

<v-btn @click="$emit('prevMonth')">
    <v-icon
      dark
      left
    >
      keyboard_arrow_left
    </v-icon>
    Prev
  </v-btn>

VueJS Doc about Custom Events