Add v-calendar from Vuetify Labs

[joepavitt]

Description

Requested here: https://discourse.nodered.org/t/vuetify-labs-v-calendar-component-possible-to-add/90185

Quick win to include it from the Vuetify Labs components

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[joepavitt]

See main.mjs for where to import this

[gayanSandamal]

This doesn't looks good need to investigate more and holding this off for https://github.com/FlowFuse/node-red-dashboard/issues/1180 and revisit after completing it

Expected UI should be like this Check this Vuetify demo

[Bobo-amg]

I was able to override the css to change the look of the buttons but couldn't get the data from the labs examples to render. Is there some Dashboard magic happening preventing this?

[Steve-Mcl]

This doesnt look too bad if button styles are overriden in the template and a smaller theme setting is selected - though i would prefer to understand why our default dashboard styles make this look so bad!

also, not sure why the buttons are always blue (instead of the tertiary style in the vuetify demo)

Template

<template>
  <v-row class="fill-height">
    <v-col>
      <v-sheet height="600">
        <v-calendar
          ref="calendar"
          v-model="today"
          :events="events"
          color="primary"
          type="month"
        ></v-calendar>
      </v-sheet>
    </v-col>
  </v-row>
</template>

<script>

  export default {
    data: () => ({
      focus: '',
      events: [],
      colors: [
        'blue',
        'indigo',
        'deep-purple',
        'cyan',
        'green',
        'orange',
        'grey darken-1',
      ],
      names: [
        'Meeting',
        'Holiday',
        'PTO',
        'Travel',
        'Event',
        'Birthday',
        'Conference',
        'Party',
      ],
      today: []
    }),
    mounted() {
      console.log('mounted')
      const adapter = useDate()
      this.fetchEvents({
        start: adapter.startOfDay(adapter.startOfMonth(new Date())),
        end: adapter.endOfDay(adapter.endOfMonth(new Date())),
      })
    },
    methods: {
      getEventColor(event) {
        return event.color
      },
      fetchEvents({ start, end }) {
         console.log('fetchEvents')
        const events = []

        const min = start
        const max = end
        const days = (max.getTime() - min.getTime()) / 86400000
        const eventCount = this.rnd(days, days + 20)

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

          events.push({
            title: this.names[this.rnd(0, this.names.length - 1)],
            start: first,
            end: second,
            color: this.colors[this.rnd(0, this.colors.length - 1)],
            allDay: !allDay,
          })
        }

        this.events = events
      },
      rnd(a, b) {
        return Math.floor((b - a + 1) * Math.random()) + a
      },
    },
  }
</script>

<style>
.v-calendar .v-btn.v-btn--density-default, .v-btn.v-btn--density-compact, .v-btn.v-btn--density-comfortable {
    height: unset !important;
    min-height: unset !important;
}
</style>

[Steve-Mcl]

for the memory banks:

Adding

import { VCalendar, VCalendarDay, VCalendarHeader, VCalendarMonthDay } from 'vuetify/labs/VCalendar'

and

const vuetify = createVuetify({
    components: {
        ...components,
        VCalendar,
        VCalendarDay,
        VCalendarHeader,
        VCalendarMonthDay,
        VNumberInput,
        VTreeview
    },
    ...

to ui/src/main.mjs permits calendar to be used.