Feat(VCalendar): Add eventHandlers and slots

[blalan05]

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-row>
          <v-col>
            <v-calendar v-model="thisDate" :events="events">
              <template #title="title">
                <span>{{ title }}</span>
              </template>
              <template #event="{ event }">
                {{ `Test ${event.title}` }}
              </template>
            </v-calendar>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>
<script setup>
  import { ref } from 'vue'

  const thisDate = ref([new Date()])

  const events = ref([
    {
      start: new Date(),
      end: new Date(),
      title: 'Event 1',
    },
  ])
</script>

[blalan05]

@nekosaur I started this code a few weeks ago, but wasn't able to get it working. I've tried to match what you PR'd in #19555. But I still don't see the slots overriding content. This PRs also addresses the missing event handling and more slots.

[nekosaur]

Is there support for <slot> in jsx?

[KaelWD]

No.

[nekosaur]

question: what's the difference between day and intervalDay slots?

[blalan05]

day is the replacement for MonthDay, and intervalDay would be the week/day view "day". The props and display is completely different.

[nekosaur]

Could the slot names be improved? It's not immediately clear what they do and when you should use which

[nekosaur]

question: I'm assuming the dynamic nature of this means that the events can't be documented in/through code? @KaelWD

[KaelWD]

We could have a genPrefixedEventProps<T>(':day') too but it would have to add every single dom event as a prop which would be a huge mess. v2 got around it by manually defining <event>:row in the overrides file but v3 doesn't have that.

[nekosaur]

yeah.. might need that override again

[Jang-Eun-Ji]

Here is my solution for #19624 :
I just count the 'v-chip__content' (in month-day format) on the screen.
When you fetch monthly data from the server, if you retrieve it sorted by date and time,
you can know which event you are currently clicking on.
This is the code to find the index of the event on the screen and print it with console.log.
Just you know, my current code is a temporary solution until Vuetify further develops the data format for the calendar.

findElementIndex(event) {
      const clickedElement = event.target.closest('.v-chip__content');
      if (!clickedElement) {
        console.log('Clicked element is not a .v-chip__content element');
        return;
      }
      const allElements = Array.from(document.querySelectorAll('.v-chip__content'));
      const elementIndex = allElements.indexOf(clickedElement);
      console.log('Clicked .v-chip__content Element Index:', elementIndex);
    }

[nekosaur]

I rebased and pushed some changes