fix(CalendarPickerView): Fix empty header cell for some month

src/components/calendar-picker-view/calendar-picker-view.tsx

@@ -179,6 +179,20 @@ export const CalendarPickerView = forwardRef<
 
       const yearMonth = `${year}-${month}`
 
+      // 获取需要预先填充的空格，如果是 7 天则不需要填充
+      const presetEmptyCellCount =
+        props.weekStartsOn === 'Monday'
+          ? monthIterator.date(1).isoWeekday() - 1
+          : monthIterator.date(1).isoWeekday()
+      const presetEmptyCells =
+        presetEmptyCellCount == 7
+          ? null
+          : Array(presetEmptyCellCount)
+              .fill(null)
+              .map((_, index) => (
+                <div key={index} className={`${classPrefix}-cell`}></div>
+              ))
+
       cells.push(
         <div key={yearMonth} data-year-month={yearMonth}>
           <div className={`${classPrefix}-title`}>
@@ -191,15 +205,7 @@ export const CalendarPickerView = forwardRef<
           </div>
           <div className={`${classPrefix}-cells`}>
             {/* 空格填充 */}
-            {Array(
-              props.weekStartsOn === 'Monday'
-                ? monthIterator.date(1).isoWeekday() - 1
-                : monthIterator.date(1).isoWeekday()
-            )
-              .fill(null)
-              .map((_, index) => (
-                <div key={index} className={`${classPrefix}-cell`}></div>
-              ))}
+            {presetEmptyCells}
             {/* 遍历每月 */}
             {Array(monthIterator.daysInMonth())
               .fill(null)

src/components/calendar-picker-view/tests/__snapshots__/calendar-picker-view.test.tsx.snap

@@ -6456,27 +6456,6 @@ exports[`Calendar jump to a day 2`] = `
         <div
           class="adm-calendar-picker-view-cells"
         >
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
           <div
             class="adm-calendar-picker-view-cell"
           >

src/components/calendar-picker-view/tests/calendar-picker-view.test.tsx

@@ -1,8 +1,8 @@
-import React, { useRef } from 'react'
-import { render, testA11y, fireEvent } from 'testing'
-import CalendarPickerView, { CalendarPickerViewRef } from '..'
 import dayjs from 'dayjs'
 import MockDate from 'mockdate'
+import React, { useRef } from 'react'
+import { fireEvent, render, testA11y } from 'testing'
+import CalendarPickerView, { CalendarPickerViewRef } from '..'
 
 const classPrefix = `adm-calendar-picker-view`
 
@@ -160,4 +160,17 @@ describe('Calendar', () => {
     )
     expect(document.getElementsByClassName('custom-cell').length).toBe(31)
   })
+
+  test('not fill empty cells if unnecessary', () => {
+    const { container } = render(
+      <CalendarPickerView
+        min={new Date('2024-09-01')}
+        max={new Date('2024-09-30')}
+      />
+    )
+
+    expect(
+      container.querySelectorAll('.adm-calendar-picker-view-cell')
+    ).toHaveLength(30)
+  })
 })

src/components/calendar-picker/demos/demo1.tsx

@@ -1,6 +1,6 @@
+import { CalendarPicker, List } from 'antd-mobile'
 import dayjs from 'dayjs'
 import React, { useState } from 'react'
-import { CalendarPicker, List } from 'antd-mobile'
 
 const defaultRange: [Date, Date] = [
   dayjs().toDate(),
@@ -16,7 +16,8 @@ export default () => {
   const [visible2, setVisible2] = useState(false)
   const [visible3, setVisible3] = useState(false)
 
-  const singleDate: Date = new Date('2023-06-03')
+  // const singleDate: Date = new Date('2023-06-03')
+  const singleDate: Date = new Date('2024-09-01')
 
   return (
     <List header='日期选择'>
@@ -32,6 +33,8 @@ export default () => {
           defaultValue={singleDate}
           onClose={() => setVisible1(false)}
           onMaskClick={() => setVisible1(false)}
+          min={new Date('2024-09-01')}
+          max={new Date('2024-09-30')}
         />
       </List.Item>
       <List.Item