title: How to suppress @click:day for v-calendar when clicking an event slot item?
body: <p>I have been using Vuetify (v1.5.16) with VueJS for a while now and had a need to leverage the <a href="https://vuetifyjs.com/en/components/calendars" rel="nofollow noreferrer">v-calendar</a> component, but I am running into an issue with the click events.</p>
  <p>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.</p>
  <p>My problem comes in that if I set the @click:day=&quot;someMethod&quot; 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.</p>
  <p>Example of issue: <a href="https://codepen.io/anon/pen/RXVGZv?&amp;editable=true&amp;editors=111" rel="nofollow noreferrer">codepen</a></p>
  <pre class="lang-html prettyprint-override"><code>&lt;v-calendar
          :now=&quot;today&quot;
          :value=&quot;today&quot;
          color=&quot;primary&quot;
          :type=&quot;selectedType&quot;
          @click:day=&quot;(event)=&gt;dateClick(event,true)&quot;
        &gt;
          &lt;template v-slot:day=&quot;{ date }&quot;&gt;
            &lt;template v-for=&quot;event in eventsMap[date]&quot;&gt;
              &lt;v-menu
                :key=&quot;event.title&quot;
                v-model=&quot;event.open&quot;
                full-width
                offset-x
              &gt;
                &lt;template v-slot:activator=&quot;{ on }&quot;&gt;
                  &lt;div
                    v-if=&quot;!event.time&quot;
                    v-ripple
                    class=&quot;my-event&quot;
                    v-on=&quot;on&quot;
                    v-html=&quot;event.title&quot;
                  &gt;&lt;/div&gt;
                &lt;/template&gt;
                &lt;v-card
                  color=&quot;grey lighten-4&quot;
                  min-width=&quot;350px&quot;
                  flat
                &gt;
                  &lt;v-toolbar
                    color=&quot;primary&quot;
                    dark
                  &gt;
                    &lt;v-btn icon&gt;
                      &lt;v-icon&gt;edit&lt;/v-icon&gt;
                    &lt;/v-btn&gt;
                    &lt;v-toolbar-title v-html=&quot;event.title&quot;&gt;&lt;/v-toolbar-title&gt;
                    &lt;v-spacer&gt;&lt;/v-spacer&gt;
                    &lt;v-btn icon&gt;
                      &lt;v-icon&gt;favorite&lt;/v-icon&gt;
                    &lt;/v-btn&gt;
                    &lt;v-btn icon&gt;
                      &lt;v-icon&gt;more_vert&lt;/v-icon&gt;
                    &lt;/v-btn&gt;
                  &lt;/v-toolbar&gt;
                  &lt;v-card-title primary-title&gt;
                    &lt;span v-html=&quot;event.details&quot;&gt;&lt;/span&gt;
                  &lt;/v-card-title&gt;
                  &lt;v-card-actions&gt;
                    &lt;v-btn
                      flat
                      color=&quot;secondary&quot;
                    &gt;
                      Cancel
                    &lt;/v-btn&gt;
                  &lt;/v-card-actions&gt;
                &lt;/v-card&gt;
              &lt;/v-menu&gt;
            &lt;/template&gt;
          &lt;/template&gt;
        &lt;/v-calendar&gt;
  </code></pre>
  <p>I've tried leveraging the event sub commands identified by VueJS, but they don't seem to work. <a href="https://v2.vuejs.org/v2/guide/events.html" rel="nofollow noreferrer">VueJS Events</a></p>