feat(calendar): add new prop for dynamic/static number of weeks (#19584)

Co-authored-by: John Leider <john@vuetifyjs.com>

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

@@ -60,7 +60,9 @@ export const makeVDatePickerProps = propsFactory({
   },
 
   ...makeVDatePickerControlsProps(),
-  ...makeVDatePickerMonthProps(),
+  ...makeVDatePickerMonthProps({
+    weeksInMonth: 'static' as const,
+  }),
   ...omit(makeVDatePickerMonthsProps(), ['modelValue']),
   ...omit(makeVDatePickerYearsProps(), ['modelValue']),
   ...makeVPickerProps({ title: '$vuetify.datePicker.title' }),

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

@@ -167,7 +167,7 @@ export const VDatePickerMonth = genericComponent<VDatePickerMonthSlots>()({
         <MaybeTransition name={ transition.value }>
           <div
             ref={ daysRef }
-            key={ daysInMonth.value[0].date.toString() }
+            key={ daysInMonth.value[0].date?.toString() }
             class="v-date-picker-month__days"
           >
             { !props.hideWeekdays && adapter.getWeekdays().map(weekDay => (

packages/vuetify/src/composables/calendar.ts

@@ -21,6 +21,7 @@ export interface CalendarProps {
   month: number | string | undefined
   weekdays: number[]
   year: number | string | undefined
+  weeksInMonth: 'dynamic' | 'static'
 
   'onUpdate:modelValue': ((value: unknown[]) => void) | undefined
   'onUpdate:month': ((value: number) => void) | undefined
@@ -42,6 +43,10 @@ export const makeCalendarProps = propsFactory({
     type: Array<number>,
     default: () => [0, 1, 2, 3, 4, 5, 6],
   },
+  weeksInMonth: {
+    type: String as PropType<'dynamic' | 'static'>,
+    default: 'dynamic',
+  },
 }, 'calendar')
 
 export function useCalendar (props: CalendarProps) {
@@ -86,15 +91,15 @@ export function useCalendar (props: CalendarProps) {
     v => adapter.getMonth(v)
   )
 
-  const weeksInMonth = computed<Date[][]>((): Date[][] => {
+  const weeksInMonth = computed(() => {
     const weeks = adapter.getWeekArray(month.value)
 
     const days = weeks.flat()
 
     // Make sure there's always 6 weeks in month (6 * 7 days)
-    // But only do it if we're not hiding adjacent months?
+    // if weeksInMonth is 'static'
     const daysInMonth = 6 * 7
-    if (days.length < daysInMonth) {
+    if (props.weeksInMonth === 'static' && days.length < daysInMonth) {
       const lastDay = days[days.length - 1]
 
       let week = []
@@ -108,10 +113,10 @@ export function useCalendar (props: CalendarProps) {
       }
     }
 
-    return weeks as Date[][]
+    return weeks
   })
 
-  function genDays (days: Date[], today: Date) {
+  function genDays (days: unknown[], today: unknown) {
     return days.filter(date => {
       return props.weekdays.includes(adapter.toJsDate(date).getDay())
     }).map((date, index) => {
@@ -149,11 +154,9 @@ export function useCalendar (props: CalendarProps) {
       week.push(adapter.addDays(lastDay, day))
     }
 
-    const days = week as Date[]
-
-    const today = adapter.date() as Date
+    const today = adapter.date()
 
-    return genDays(days, today)
+    return genDays(week, today)
   })
 
   const daysInMonth = computed(() => {