feat(VCalendar): add event slot (#19555)

Co-authored-by: John Leider <[email protected]>
vuetifyjs · Apr 11, 2024 · d63f6e2 · d63f6e2
1 parent 2cb1ae5
commit d63f6e2
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/packages/vuetify/src/labs/VCalendar/VCalendar.tsx b/packages/vuetify/src/labs/VCalendar/VCalendar.tsx
@@ -25,6 +25,7 @@ export const makeVCalendarProps = propsFactory({
 
 export type VCalendarSlots = {
   header: { title: string }
+  event: { day?: Object, allDay: boolean, event: Record<string, unknown> }
 }
 
 export const VCalendar = genericComponent<VCalendarSlots>()({
@@ -152,6 +153,9 @@ export const VCalendar = genericComponent<VCalendarSlots>()({
                           day={ day }
                           title={ day ? adapter.format(day.date, 'dayOfMonth') : 'NaN' }
                           events={ props.events?.filter(e => adapter.isSameDay(day.date, e.start) || adapter.isSameDay(day.date, e.end)) }
+                          v-slots={{
+                            event: slots.event,
+                          }}
                         ></VCalendarMonthDay>
                       )),
                     ]

diff --git a/packages/vuetify/src/labs/VCalendar/VCalendarMonthDay.tsx b/packages/vuetify/src/labs/VCalendar/VCalendarMonthDay.tsx
@@ -12,6 +12,7 @@ export type VCalendarMonthDaySlots = {
   default: never
   content: never
   title: { title?: number | string }
+  event: { day?: Object, allDay: boolean, event: Record<string, unknown> }
 }
 
 export const makeVCalendarMonthDayProps = propsFactory({
@@ -23,7 +24,7 @@ export const makeVCalendarMonthDayProps = propsFactory({
   title: [Number, String],
 }, 'VCalendarMonthDay')
 
-export const VCalendarMonthDay = genericComponent< VCalendarMonthDaySlots >()({
+export const VCalendarMonthDay = genericComponent<VCalendarMonthDaySlots>()({
   name: 'VCalendarMonthDay',
 
   props: makeVCalendarMonthDayProps(),
@@ -60,14 +61,19 @@ export const VCalendarMonthDay = genericComponent< VCalendarMonthDaySlots >()({
               { slots.content?.() ?? (
                 <div>
                   <div class="v-calendar-weekly__day-alldayevents-container">
-                    { props.events?.filter(event => event.allDay).map(event => (
-                      <VCalendarEvent day={ props.day } event={ event } allDay />
-                    ))}
+                    { props.events?.filter(event => event.allDay).map(event => slots.event
+                      ? slots.event({ day: props.day, allDay: true, event })
+                      : (
+                        <VCalendarEvent day={ props.day } event={ event } allDay />
+                      ))}
                   </div>
+
                   <div class="v-calendar-weekly__day-events-container">
-                    { props.events?.filter(event => !event.allDay).map(event => (
-                      <VCalendarEvent day={ props.day } event={ event } />
-                    ))}
+                    { props.events?.filter(event => !event.allDay).map(event => slots.event
+                      ? slots.event({ day: props.day, event, allDay: false })
+                      : (
+                        <VCalendarEvent day={ props.day } event={ event } />
+                      ))}
                   </div>
                 </div>
               )}