fix(VCalendar): use camelCase event names

fixes #22063

Author: KaelWD

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

@@ -65,12 +65,12 @@
   },
   "events": {
     "[`${string}:date`]": "Any event on the day of the month link. The second argument is the day & time object.",
-    "[`${string}:day-category`]": "Any event on a day in the `category` view. The second argument is the day object.",
+    "[`${string}:dayCategory`]": "Any event on a day in the `category` view. The second argument is the day object.",
     "[`${string}:day`]": "Any event on a day. The second argument is the day object.",
     "[`${string}:event`]": "Any event on a specific event. The second argument is the day & time object.",
     "[`${string}:interval`]": "Any event at a specific interval label in the `day` view. The second argument is the day & time object.",
     "[`${string}:more`]": "Any event on the `X more` button on views with too many events in a day. The second argument is the day & time object.",
-    "[`${string}:time-category`]": "Any event at a specific time in the `category` view. The second argument is the day & time object.",
+    "[`${string}:timeCategory`]": "Any event at a specific time in the `category` view. The second argument is the day & time object.",
     "[`${string}:time`]": "Any event at a specific time in the `day` view. The second argument is the day & time object.",
     "change": "The range of days displayed on the calendar changed. This is triggered on initialization. The event passed is an object with start and end date objects.",
     "moved": "One of the functions `next`, `prev`, and `move` was called. The event passed is the day object calculated for the movement."

packages/vuetify/src/components/VDataTable/VDataTableRows.tsx

@@ -123,7 +123,7 @@ export const VDataTableRows = genericComponent<new <T>(
                 <VDataTableGroupHeaderRow
                   key={ `group-header_${item.id}` }
                   item={ item }
-                  { ...getPrefixedEventHandlers(attrs, ':group-header', () => slotProps) }
+                  { ...getPrefixedEventHandlers(attrs, ':groupHeader', () => slotProps) }
                   { ...groupHeaderRowProps }
                   v-slots={ slots }
                 />

packages/vuetify/src/labs/VCalendar/VCalendar.tsx

@@ -88,12 +88,12 @@ interface CalendarDayCategorySlotScope extends CalendarDayBodySlotScope {
 export const VCalendar = genericComponent<new (
   props: {
     [key: `on${Capitalize<string>}:date`]: EventProp<[Event, CalendarTimestamp]>
-    [key: `on${Capitalize<string>}:day-category`]: EventProp<[Event, CalendarDayCategorySlotScope]>
+    [key: `on${Capitalize<string>}:dayCategory`]: EventProp<[Event, CalendarDayCategorySlotScope]>
     [key: `on${Capitalize<string>}:day`]: EventProp<[Event, CalendarDayBodySlotScope]>
     [key: `on${Capitalize<string>}:event`]: EventProp<[Event, EventSlotScope]>
     [key: `on${Capitalize<string>}:interval`]: EventProp<[Event, CalendarTimestamp]>
     [key: `on${Capitalize<string>}:more`]: EventProp<[Event, CalendarDaySlotScope]>
-    [key: `on${Capitalize<string>}:time-category`]: EventProp<[Event, CalendarDayCategorySlotScope]>
+    [key: `on${Capitalize<string>}:timeCategory`]: EventProp<[Event, CalendarDayCategorySlotScope]>
     [key: `on${Capitalize<string>}:time`]: EventProp<[Event, CalendarDayBodySlotScope]>
   },
   slots: {

packages/vuetify/src/labs/VCalendar/VCalendarCategory.tsx

@@ -60,7 +60,7 @@ export const VCalendarCategory = defineComponent({
 
     function genDayHeaderCategory (day: CalendarTimestamp, scope: any) {
       const headerTitle = typeof scope.category === 'object' ? scope.category.categoryName : scope.category
-      const events = getPrefixedEventHandlers(attrs, ':day-category', () => {
+      const events = getPrefixedEventHandlers(attrs, ':dayCategory', () => {
         return getCategoryScope(base.getSlotScope(day) || day, scope.category)
       })
       return (
@@ -139,7 +139,7 @@ export const VCalendarCategory = defineComponent({
     }
 
     function genDayBodyCategory (day: CalendarTimestamp, category: CalendarCategory) {
-      const events = getPrefixedEventHandlers(attrs, ':time-category', e => {
+      const events = getPrefixedEventHandlers(attrs, ':timeCategory', e => {
         return getCategoryScope(
           base.getSlotScope(base.getTimestampAtEvent(e, day)),
           category