feat(VCalendar): port to v3

[blalan05]

Markup:

<template>
  <v-app full-height>
    <div>
      <v-sheet tile height="54" class="d-flex">
        <v-btn icon class="ma-2" @click="calendar.prev()">
          <v-icon>mdi-chevron-left</v-icon>
        </v-btn>
        <v-select
          v-model="type"
          :items="types"
          dense
          outlined
          hide-details
          class="ma-2"
          label="type"
        />
        <v-select
          v-model="mode"
          :items="modes"
          dense
          outlined
          hide-details
          label="event-overlap-mode"
          class="ma-2"
        />
        <v-select
          v-model="weekday"
          :items="weekdays"
          dense
          outlined
          hide-details
          label="weekdays"
          class="ma-2"
        />
        <v-btn color="primary" @click="getEvents({ start, end })">
          Get Events
        </v-btn>
        <v-spacer />
        <v-btn icon class="ma-2" @click="calendar.next()">
          <v-icon>mdi-chevron-right</v-icon>
        </v-btn>
      </v-sheet>
      <v-sheet height="600">
        <v-calendar
          ref="calendar"
          :categories="names"
          v-model="value"
          :weekdays="weekday"
          :start="start"
          :end="end"
          :type="type"
          :events="events"
          :event-overlap-mode="mode"
          :event-overlap-threshold="30"
          :event-color="getEventColor"
          @change="getEvents"
        />
      </v-sheet>
    </div>
  </v-app>
</template>

<script>
  import { ref } from 'vue'

  export default {
    setup(props, context) {
      const calendar = ref(null)
      const start = '2022-05-01'
      const end = '2022-05-31'
      const type = ref('month')
      const types = ['month', 'week', 'day', '4day', 'category']
      const mode = ref('stack')
      const events = ref([])
      const modes = ['stack', 'column']
      const weekday = ref([0, 1, 2, 3, 4, 5, 6])
      const weekdays = [
        { title: 'Sun - Sat', value: [0, 1, 2, 3, 4, 5, 6] },
        { title: 'Mon - Sun', value: [1, 2, 3, 4, 5, 6, 0] },
        { title: 'Mon - Fri', value: [1, 2, 3, 4, 5] },
        { title: 'Mon, Wed, Fri', value: [1, 3, 5] },
      ]
      const value = ref('')
      const colors = [
        'blue',
        'indigo',
        'deep-purple',
        'cyan',
        'green',
        'orange',
        'grey darken-1',
      ]
      const names = [
        'Meeting',
        'Holiday',
        'PTO',
        'Travel',
        'Event',
        'Birthday',
        'Conference',
        'Party',
      ]

      const getEvents = ({ start, end }) => {
        const min = new Date(`${start}T00:00:00`)
        const max = new Date(`${end}T23:59:59`)
        const days = (max.getTime() - min.getTime()) / 86400000
        const eventCount = rnd(days, days + 20)

        for (let i = 0; i < eventCount; i++) {
          const allDay = rnd(0, 3) === 0
          const firstTimestamp = rnd(min.getTime(), max.getTime())
          const first = new Date(firstTimestamp - (firstTimestamp % 900000))
          const secondTimestamp = rnd(2, allDay ? 288 : 8) * 900000
          const second = new Date(first.getTime() + secondTimestamp)
          const name = names[rnd(0, names.length - 1)]

          events.value.push({
            name,
            category: name,
            start: first,
            end: second,
            color: colors[rnd(0, colors.length - 1)],
            timed: !allDay,
          })
        }
      }
      const getEventColor = event => {
        return event.color
      };
      const rnd = (a, b) => {
        return Math.floor((b - a + 1) * Math.random()) + a
      };

      return {
        calendar,
        start,
        end,
        type,
        types,
        mode,
        modes,
        weekday,
        weekdays,
        value,
        events,
        colors,
        names,
        getEvents,
        getEventColor,
        rnd,
      }
    },
  }
</script>

[septatrix]

I see you, @blalan05, have been working on this a few weeks ago. Would you mind giving a rough status update how far you are with the porting or which parts do and do not work yet?

Also for bookkeeping: fixes #13469

[MajesticPotatoe]

closed in favor of #16803