How to suppress @click:day for v-calendar when clicking an event slot item?

Question

I have been using Vuetify (v1.5.16) with VueJS for a while now and had a need to leverage the v-calendar component, but I am running into an issue with the click events.

In short, I want to allow the user to click the white space on the calendar in the month view to open a dialog to add an event. I also want the user to click an event slot and be able to view the details of that event and delete it.

My problem comes in that if I set the @click:day="someMethod" on the v-calendar component, it will fire the event when the white space for the day is clicked as well as when the event slot is clicked.

Example of issue: codepen

<v-calendar
        :now="today"
        :value="today"
        color="primary"
        :type="selectedType"
        @click:day="(event)=>dateClick(event,true)"
      >
        <template v-slot:day="{ date }">
          <template v-for="event in eventsMap[date]">
            <v-menu
              :key="event.title"
              v-model="event.open"
              full-width
              offset-x
            >
              <template v-slot:activator="{ on }">
                <div
                  v-if="!event.time"
                  v-ripple
                  class="my-event"
                  v-on="on"
                  v-html="event.title"
                ></div>
              </template>
              <v-card
                color="grey lighten-4"
                min-width="350px"
                flat
              >
                <v-toolbar
                  color="primary"
                  dark
                >
                  <v-btn icon>
                    <v-icon>edit</v-icon>
                  </v-btn>
                  <v-toolbar-title v-html="event.title"></v-toolbar-title>
                  <v-spacer></v-spacer>
                  <v-btn icon>
                    <v-icon>favorite</v-icon>
                  </v-btn>
                  <v-btn icon>
                    <v-icon>more_vert</v-icon>
                  </v-btn>
                </v-toolbar>
                <v-card-title primary-title>
                  <span v-html="event.details"></span>
                </v-card-title>
                <v-card-actions>
                  <v-btn
                    flat
                    color="secondary"
                  >
                    Cancel
                  </v-btn>
                </v-card-actions>
              </v-card>
            </v-menu>
          </template>
        </template>
      </v-calendar>

I've tried leveraging the event sub commands identified by VueJS, but they don't seem to work. VueJS Events

Answer 1

Even though the v-menu activator slot documentation states...

will activate the component when clicked (or hover for specific components). This manually stops the event propagation

I'm not entirely convinced that's the case.

Changing your activator to specifically bind a click event with propagation stopped seems to work...

<template v-slot:activator="{ on }">
  <div
    v-if="!event.time"
    v-ripple
    class="my-event"
    v-on="on"
    @click.stop
    v-html="event.title"
  ></div>
</template>

---

And here's the bug report for exactly this issue ~ https://github.com/vuetifyjs/vuetify/issues/3333

Answer 2

Use nativeEvent.stopPropagation() at the end of the showEvent method.

Take a look in the vuetify example.