fix(VCalendar): correct effective weekdays determination (#22042)

Author: J-Sek

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

@@ -24,7 +24,6 @@ import {
   getEndOfMonth,
   getStartOfMonth,
   nextDay,
-  parseTimestamp,
   prevDay,
   relativeDays,
   timestampToDate,
@@ -51,7 +50,6 @@ interface VCalendarRenderProps {
   end: CalendarTimestamp
   component: JSXComponent & { filterProps: <T>(props: T) => Partial<T> }
   maxDays: number
-  weekdays: number[]
   categories: CalendarCategory[]
 }
 
@@ -154,12 +152,6 @@ export const VCalendar = genericComponent<new (
     const lastStart = ref<CalendarTimestamp | null>(null)
     const lastEnd = ref<CalendarTimestamp | null>(null)
 
-    const parsedValue = computed((): CalendarTimestamp => {
-      return (validateTimestamp(props.modelValue)
-        ? parseTimestamp(props.modelValue, true)
-        : (base.parsedStart.value || base.times.today))
-    })
-
     const parsedCategoryDays = computed((): number => {
       return parseInt(String(props.categoryDays)) || 1
     })
@@ -169,10 +161,9 @@ export const VCalendar = genericComponent<new (
     })
 
     const renderProps = computed((): VCalendarRenderProps => {
-      const around = parsedValue.value
+      const around = base.parsedValue.value
       let component: any = null
       let maxDays = props.maxDays
-      let weekdays = base.parsedWeekdays.value
       let categories = parsedCategories.value
       let start = around
       let end = around
@@ -192,19 +183,12 @@ export const VCalendar = genericComponent<new (
         case 'day':
           component = VCalendarDaily
           maxDays = 1
-          weekdays = [start.weekday]
           break
         case '4day':
           component = VCalendarDaily
           end = relativeDays(copyTimestamp(end), nextDay, 3)
           updateFormatted(end)
           maxDays = 4
-          weekdays = [
-            start.weekday,
-            (start.weekday + 1) % 7,
-            (start.weekday + 2) % 7,
-            (start.weekday + 3) % 7,
-          ]
           break
         case 'custom-weekly':
           component = VCalendarWeekly
@@ -223,11 +207,6 @@ export const VCalendar = genericComponent<new (
           end = relativeDays(copyTimestamp(end), nextDay, days)
           updateFormatted(end)
           maxDays = days
-          weekdays = []
-
-          for (let i = 0; i < days; i++) {
-            weekdays.push((start.weekday + i) % 7)
-          }
 
           categories = getCategoryList(categories)
           break
@@ -236,11 +215,11 @@ export const VCalendar = genericComponent<new (
           throw new Error(`${type} is not a valid Calendar type`)
       }
 
-      return { component, start, end, maxDays, weekdays, categories }
+      return { component, start, end, maxDays, categories }
     })
 
     const eventWeekdays = computed((): number[] => {
-      return renderProps.value.weekdays
+      return base.effectiveWeekdays.value
     })
 
     const categoryMode = computed((): boolean => {
@@ -287,7 +266,7 @@ export const VCalendar = genericComponent<new (
     }
 
     function move (amount = 1): void {
-      const moved = copyTimestamp(parsedValue.value)
+      const moved = copyTimestamp(base.parsedValue.value)
       const forward = amount > 0
       const mover = forward ? nextDay : prevDay
       const limit = forward ? DAYS_IN_MONTH_MAX : DAY_MIN
@@ -402,7 +381,7 @@ export const VCalendar = genericComponent<new (
     })
 
     useRender(() => {
-      const { start, end, maxDays, component: Component, weekdays, categories } = renderProps.value
+      const { start, end, maxDays, component: Component, categories } = renderProps.value
       return (
         <Component
           ref={ root }
@@ -413,7 +392,7 @@ export const VCalendar = genericComponent<new (
           start={ start.date }
           end={ end.date }
           maxDays={ maxDays }
-          weekdays={ weekdays }
+          weekdays={ base.effectiveWeekdays.value }
           categories={ categories }
           onClick:date={ (e: MouseEvent, day: CalendarTimestamp) => {
             if (attrs['onUpdate:modelValue']) emit('update:modelValue', day.date)
@@ -428,7 +407,6 @@ export const VCalendar = genericComponent<new (
       ...base,
       lastStart,
       lastEnd,
-      parsedValue,
       parsedCategoryDays,
       renderProps,
       eventWeekdays,

packages/vuetify/src/labs/VCalendar/composables/calendarBase.ts

@@ -59,6 +59,8 @@ export const makeCalendarBaseProps = propsFactory({
 }, 'VCalendar-base')
 
 export interface CalendarBaseProps {
+  modelValue?: string | number | Date
+  categoryDays?: string | number
   start: string | number | Date
   end: string | number | Date | undefined
   weekdays: string | number[]
@@ -73,16 +75,6 @@ export function useCalendarBase (props: CalendarBaseProps) {
   const { times } = useTimes({ now: props.now })
   const locale = provideLocale(props)
 
-  const parsedWeekdays = computed((): number[] => {
-    return Array.isArray(props.weekdays)
-      ? props.weekdays
-      : (props.weekdays || '').split(',').map(x => parseInt(x, 10))
-  })
-
-  const weekdaySkips = computed((): number[] => {
-    return getWeekdaySkips(parsedWeekdays.value)
-  })
-
   const parsedStart = computed((): CalendarTimestamp => {
     if (props.type === 'month') {
       return getStartOfMonth(parseTimestamp(props.start, true))
@@ -101,6 +93,39 @@ export function useCalendarBase (props: CalendarBaseProps) {
     return value
   })
 
+  const parsedValue = computed((): CalendarTimestamp => {
+    return (validateTimestamp(props.modelValue)
+      ? parseTimestamp(props.modelValue, true)
+      : (parsedStart.value || times.today))
+  })
+
+  const parsedWeekdays = computed((): number[] => {
+    return Array.isArray(props.weekdays)
+      ? props.weekdays
+      : (props.weekdays || '').split(',').map(x => parseInt(x, 10))
+  })
+
+  const effectiveWeekdays = computed((): number[] => {
+    const start = parsedValue.value
+    const days = parseInt(String(props.categoryDays)) || 1
+
+    switch (props.type) {
+      case 'day': return [start.weekday]
+      case '4day': return [
+        start.weekday,
+        (start.weekday + 1) % 7,
+        (start.weekday + 2) % 7,
+        (start.weekday + 3) % 7,
+      ]
+      case 'category': return Array.from({ length: days }, (_, i) => (start.weekday + i) % 7)
+      default: return parsedWeekdays.value
+    }
+  })
+
+  const weekdaySkips = computed((): number[] => {
+    return getWeekdaySkips(parsedWeekdays.value)
+  })
+
   const days = computed((): CalendarTimestamp[] => {
     return createDayList(
       parsedStart.value,
@@ -160,7 +185,9 @@ export function useCalendarBase (props: CalendarBaseProps) {
   return {
     times,
     locale,
+    parsedValue,
     parsedWeekdays,
+    effectiveWeekdays,
     weekdaySkips,
     parsedStart,
     parsedEnd,

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

@@ -204,7 +204,7 @@ export function useCalendarWithEvents (props: CalendarWithEventsProps, slots: an
   })
 
   const eventWeekdays = computed((): number[] => {
-    return base.parsedWeekdays.value
+    return base.effectiveWeekdays.value
   })
 
   function eventColorFunction (e: CalendarEvent): string | undefined {