feat(VDatePicker): add events and event-color support (#20965)

Co-authored-by: John Leider <9064066+johnleider@users.noreply.github.com>
Co-authored-by: J-Sek <J-Sek@users.noreply.github.com>
fixes #19296

Author: 3 people

packages/api-generator/src/locale/en/VDatePicker.json

@@ -4,7 +4,7 @@
     "calendarIcon": "The icon shown in the header when in 'input' **input-mode**.",
     "dayFormat": "Allows you to customize the format of the day string that appears in the date table. Called with date (ISO 8601 **date** string) arguments.",
     "displayDate": "The date displayed in the picker header.",
-    "eventColor": "Sets the color for event dot. It can be string (all events will have the same color) or `object` where attribute is the event date and value is boolean/color/array of colors for specified date or `function` taking date as a parameter and returning boolean/color/array of colors for that date.",
+    "eventColor": "Sets the color for event dots. It can be string (all events will have the same color) or `object` where attribute is the event date and value is boolean/color/array of colors for specified date or `function` taking date as a parameter and returning boolean/color/array of colors for that date.",
     "events": "Array of dates or object defining events or colors or function returning boolean/color/array of colors.",
     "headerColor": "Allows you to set a different color for the header when used in conjunction with the `color` prop.",
     "hideHeader": "Hides the header.",

packages/docs/src/examples/v-date-picker/event-events.vue renamed to packages/docs/src/examples/v-date-picker/prop-events.vue

@@ -1,34 +1,37 @@
 <template>
-  <v-row justify="space-between">
-    <div>
-      <div class="subheading">
-        Defined by array
+  <v-container>
+    <v-row justify="space-between">
+      <div>
+        <div class="subheading mb-5 font-weight-medium">
+          Defined by array
+        </div>
+        <v-date-picker
+          v-model="date1"
+          :events="arrayEvents"
+          event-color="green lighten-1"
+        ></v-date-picker>
       </div>
-      <v-date-picker
-        v-model="date1"
-        :events="arrayEvents"
-        event-color="green lighten-1"
-      ></v-date-picker>
-    </div>
-    <div>
-      <div class="subheading">
-        Defined by function
+      <div>
+        <div class="subheading mb-5 font-weight-medium">
+          Defined by function
+        </div>
+        <v-date-picker
+          v-model="date2"
+          :event-color="date => date[9] % 2 ? 'red' : 'yellow'"
+          :events="functionEvents"
+        ></v-date-picker>
       </div>
-      <v-date-picker
-        v-model="date2"
-        :event-color="date => date[9] % 2 ? 'red' : 'yellow'"
-        :events="functionEvents"
-      ></v-date-picker>
-    </div>
-  </v-row>
+    </v-row>
+  </v-container>
 </template>
 
 <script setup>
   import { onMounted, ref } from 'vue'
 
   const arrayEvents = ref(null)
-  const date1 = ref((new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10))
-  const date2 = ref((new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10))
+  const date1 = ref((new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)))
+  const date2 = ref((new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)))
+
   function functionEvents (date) {
     const [, , day] = date.split('-')
     if ([12, 17, 28].includes(parseInt(day, 10))) return true
@@ -49,8 +52,8 @@
   export default {
     data: () => ({
       arrayEvents: null,
-      date1: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
-      date2: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
+      date1: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)),
+      date2: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)),
     }),
 
     mounted () {

packages/docs/src/pages/en/components/date-pickers.md

@@ -88,6 +88,12 @@ Specify allowed dates using objects or functions. When using objects, accepts a
 
 <ExamplesExample file="v-date-picker/prop-allowed-dates" />
 
+#### Date events
+
+You can specify events using arrays, objects or functions. To change the default color of the event use **event-color** prop. Your **events** function or object can return an array of colors (material or css) in case you want to display multiple event indicators.
+
+<ExamplesExample file="v-date-picker/prop-events" />
+
 ### Internationalization
 
 Vuetify components can localize date formats by utilizing the [i18n](/features/internationalization) feature. This determines the appropriate locale for date display. When the default date adapter is in use, localization is managed automatically.

packages/vuetify/src/components/VDatePicker/VDatePickerMonth.sass

@@ -48,3 +48,25 @@
 
   .v-date-picker-month__day--hide-adjacent
     opacity: 0
+  .v-date-picker-month__events
+    height: $date-picker-event-size
+    left: 0
+    text-indent: 0
+    position: absolute
+    text-align: center
+    white-space: pre
+    width: 100%
+
+    > div
+      height: $date-picker-event-size
+      margin: $date-picker-event-margin
+      width: $date-picker-event-size
+      margin-bottom: -1px
+
+    .v-badge--dot .v-badge__badge
+      border-radius: $date-picker-event-border-radius
+      height: $date-picker-event-size
+      width: $date-picker-event-size
+
+  .v-date-picker-month__day .v-date-picker-month__events
+    bottom: $date-picker-event-date-bottom

packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx

@@ -2,6 +2,7 @@
 import './VDatePickerMonth.sass'
 
 // Components
+import { VBadge } from '@/components/VBadge'
 import { VBtn } from '@/components/VBtn'
 
 // Composables
@@ -12,11 +13,19 @@ import { MaybeTransition } from '@/composables/transition'
 
 // Utilities
 import { computed, ref, shallowRef, toRef, watch } from 'vue'
-import { genericComponent, omit, propsFactory, useRender } from '@/util'
+import { genericComponent, omit, propsFactory, useRender, wrapInArray } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
 
+export type DatePickerEventColorValue = boolean | string | string[]
+
+export type DatePickerEventColors = DatePickerEventColorValue |
+Record<string, DatePickerEventColorValue> | ((date: string) => DatePickerEventColorValue)
+
+export type DatePickerEvents = string[] |
+((date: string) => DatePickerEventColorValue) | Record<string, DatePickerEventColorValue>
+
 export type VDatePickerMonthSlots = {
   day: {
     props: {
@@ -40,7 +49,14 @@ export const makeVDatePickerMonthProps = propsFactory({
     type: String,
     default: 'picker-reverse-transition',
   },
-
+  events: {
+    type: [Array, Function, Object] as PropType<DatePickerEvents | null>,
+    default: () => null,
+  },
+  eventColor: {
+    type: [Array, Function, Object, String] as PropType<DatePickerEventColors>,
+    default: () => null,
+  },
   ...omit(makeCalendarProps(), ['displayValue']),
 }, 'VDatePickerMonth')
 
@@ -148,7 +164,54 @@ export const VDatePickerMonth = genericComponent<VDatePickerMonthSlots>()({
         model.value = [value]
       }
     }
+    function getEventColors (date: string): string[] {
+      const { events, eventColor } = props
+      let eventData: boolean | DatePickerEventColorValue
+      let eventColors: (boolean | string)[] = []
+
+      if (Array.isArray(events)) {
+        eventData = events.includes(date)
+      } else if (events instanceof Function) {
+        eventData = events(date) || false
+      } else if (events) {
+        eventData = events[date] || false
+      } else {
+        eventData = false
+      }
 
+      if (!eventData) {
+        return []
+      } else if (eventData !== true) {
+        eventColors = wrapInArray(eventData)
+      } else if (typeof eventColor === 'string') {
+        eventColors = [eventColor]
+      } else if (typeof eventColor === 'function') {
+        eventColors = wrapInArray(eventColor(date))
+      } else if (Array.isArray(eventColor)) {
+        eventColors = eventColor
+      } else if (typeof eventColor === 'object' && eventColor !== null) {
+        eventColors = wrapInArray(eventColor[date])
+      }
+
+      // Fallback to default color if no color is found
+      return !eventColors.length
+        ? ['surface-variant']
+        : eventColors
+          .filter(Boolean)
+          .map((color: string | boolean) => typeof color === 'string' ? color : 'surface-variant')
+    }
+
+    function genEvents (date: string): JSX.Element | null {
+      const eventColors = getEventColors(date)
+
+      if (!eventColors.length) return null
+
+      return (
+        <div class="v-date-picker-month__events">
+          { eventColors.map((color: string) => <VBadge dot color={ color } />) }
+        </div>
+      )
+    }
     useRender(() => (
       <div
         class="v-date-picker-month"
@@ -193,7 +256,6 @@ export const VDatePickerMonth = genericComponent<VDatePickerMonthSlots>()({
                   disabled: item.isDisabled,
                   icon: true,
                   ripple: false,
-                  text: item.localized,
                   variant: item.isSelected ? 'flat' : item.isToday ? 'outlined' : 'text',
                   'aria-label': getDateAriaLabel(item),
                   'aria-current': item.isToday ? 'date' : undefined,
@@ -222,7 +284,12 @@ export const VDatePickerMonth = genericComponent<VDatePickerMonthSlots>()({
                   data-v-date={ !item.isDisabled ? item.isoDate : undefined }
                 >
                   { (props.showAdjacentMonths || !item.isAdjacent) && (
-                    slots.day?.(slotProps) ?? (<VBtn { ...slotProps.props } />)
+                    slots.day?.(slotProps) ?? (
+                      <VBtn { ...slotProps.props }>
+                        { item.localized }
+                        { genEvents(item.isoDate) }
+                      </VBtn>
+                    )
                   )}
                 </div>
               )

packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.events.spec.browser.tsx

@@ -0,0 +1,82 @@
+// Utilities
+import { render } from '@test'
+import { VDatePicker } from '../VDatePicker'
+
+describe('VDatePicker events', () => {
+  it('renders event markers when events is an array', async () => {
+    render(() => (
+      <VDatePicker
+        type="month"
+        month={ 3 }
+        year={ 2022 }
+        events={['2022-04-09']}
+        eventColor="red"
+      />
+    ))
+
+    const eventElements = document.querySelectorAll('.v-badge')
+    expect(eventElements.length).toBeGreaterThan(0)
+  })
+
+  it('renders event markers when events is a function', async () => {
+    render(() => (
+      <VDatePicker
+        month={ 3 }
+        year={ 2022 }
+        events={ (date: string) => date === '2022-04-09' }
+        eventColor="red"
+      />
+    ))
+
+    // Query the DOM for the event markers
+    const eventElements = document.querySelectorAll('.v-badge')
+    expect(eventElements.length).toBeGreaterThan(0)
+  })
+
+  it('renders event markers with colors defined by an object', async () => {
+    render(() => (
+      <VDatePicker
+        month={ 3 }
+        year={ 2022 }
+        events={['2022-04-09', '2022-04-20']}
+        eventColor={{ '2022-04-09': 'red', '2022-04-20': 'blue lighten-1' }}
+      />
+    ))
+
+    const eventElements = document.querySelectorAll('.v-badge')
+    expect(eventElements.length).toBeGreaterThan(0)
+  })
+
+  it('renders event markers with colors defined by a function', async () => {
+    render(() => (
+      <VDatePicker
+        month={ 3 }
+        year={ 2022 }
+        events={['2022-04-09', '2022-04-20']}
+        eventColor={ (date: string) => ({ '2022-04-09': 'red' }[date] || false) }
+      />
+    ))
+
+    const eventElements = document.querySelectorAll('.v-badge')
+    expect(eventElements.length).toBeGreaterThan(0)
+  })
+
+  it('uses default color when eventColor is not set', async () => {
+    render(() => (
+      <VDatePicker
+        type="month"
+        month={ 3 }
+        year={ 2022 }
+        events={{ '2022-04-09': true }}
+      />
+    ))
+
+    const eventElements = document.querySelectorAll('.v-badge')
+    expect(eventElements.length).toBeGreaterThan(0)
+
+    const hasSurfaceVariant = Array.from(eventElements).some(el =>
+      el.querySelector('.v-badge__badge')?.classList.contains('bg-surface-variant')
+    )
+    expect(hasSurfaceVariant).toBe(true)
+  })
+})

packages/vuetify/src/components/VDatePicker/_variables.scss

@@ -16,3 +16,8 @@ $date-picker-months-height: 288px !default;
 
 $date-picker-years-height: 288px !default;
 $date-picker-years-padding-inline: 32px !default;
+
+$date-picker-event-size: 8px !default;
+$date-picker-event-border-radius: 4px !default;
+$date-picker-event-margin: 0 1px !default;
+$date-picker-event-date-bottom: 8px !default;