fix(VDatePicker): completely hide days not in weekdays array (#21624)

fixes #21492
fixes #19718

This reverts commit b1f270b.

Author: KaelWD

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

@@ -10,23 +10,18 @@
     --v-date-picker-month-day-diff: 4px
 
   .v-date-picker-month__weeks
-    display: grid
-    grid-template-rows: min-content min-content min-content min-content min-content min-content min-content
+    display: flex
+    flex-direction: column
     column-gap: $date-picker-month-column-gap
     font-size: $date-picker-month-font-size
 
-    + .v-date-picker-month__days
-      grid-row-gap: 0
-
   .v-date-picker-month__weekday
     font-size: $date-picker-month-font-size
 
   .v-date-picker-month__days
     display: grid
-    grid-template-columns: min-content min-content min-content min-content min-content min-content min-content
+    grid-template-columns: repeat(var(--v-date-picker-days-in-week), min-content)
     column-gap: $date-picker-month-column-gap
-    flex: 1 1
-    justify-content: space-around
 
   .v-date-picker-month__day
     align-items: center

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

@@ -57,7 +57,7 @@ export const VDatePickerMonth = genericComponent<VDatePickerMonthSlots>()({
   setup (props, { emit, slots }) {
     const daysRef = ref()
 
-    const { daysInMonth, model, weekNumbers } = useCalendar(props)
+    const { daysInMonth, model, weekNumbers, weekDays, weekdayLabels } = useCalendar(props)
     const adapter = useDate()
 
     const rangeStart = shallowRef()
@@ -142,7 +142,10 @@ export const VDatePickerMonth = genericComponent<VDatePickerMonthSlots>()({
     }
 
     useRender(() => (
-      <div class="v-date-picker-month">
+      <div
+        class="v-date-picker-month"
+        style={{ '--v-date-picker-days-in-week': weekDays.value.length }}
+      >
         { props.showWeek && (
           <div key="weeks" class="v-date-picker-month__weeks">
             { !props.hideWeekdays && (
@@ -165,7 +168,7 @@ export const VDatePickerMonth = genericComponent<VDatePickerMonthSlots>()({
             key={ daysInMonth.value[0].date?.toString() }
             class="v-date-picker-month__days"
           >
-            { !props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek).map(weekDay => (
+            { !props.hideWeekdays && weekdayLabels.value.map(weekDay => (
               <div
                 class={[
                   'v-date-picker-month__day',

packages/vuetify/src/composables/calendar.ts

@@ -122,8 +122,13 @@ export function useCalendar (props: CalendarProps) {
 
   const weekDays = computed(() => {
     const firstDayOfWeek = adapter.toJsDate(adapter.startOfWeek(adapter.date(), props.firstDayOfWeek)).getDay()
-    // Always generate all days, regardless of props.weekdays
-    return [0, 1, 2, 3, 4, 5, 6].map(day => (day + firstDayOfWeek) % 7)
+    return props.weekdays.map(day => (day + firstDayOfWeek) % 7)
+  })
+
+  const weekdayLabels = computed(() => {
+    const labels = adapter.getWeekdays(props.firstDayOfWeek)
+
+    return weekDays.value.map(day => labels[day])
   })
 
   const weeksInMonth = computed(() => {
@@ -223,7 +228,7 @@ export function useCalendar (props: CalendarProps) {
       return !props.allowedDates(date)
     }
 
-    return !props.weekdays.includes(adapter.toJsDate(date).getDay())
+    return false
   }
 
   return {
@@ -234,6 +239,7 @@ export function useCalendar (props: CalendarProps) {
     model,
     weeksInMonth,
     weekDays,
+    weekdayLabels,
     weekNumbers,
   }
 }