fix: months with 4 weeks not displaying 6 weeks w/ fixedWeeks (gpbl#2590

)

* Add test case

* Update getDates and getMonths to fill up 42 days / month

* Update test for getDates

examples/TestCase2585.test.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+import { render, screen } from "@/test/render";
+
+import { TestCase2585 } from "./TestCase2585";
+
+render(<TestCase2585 />);
+
+test("should render 42*12 days", () => {
+  expect(screen.getAllByRole("cell")).toHaveLength(42 * 12);
+});

examples/TestCase2585.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+import { DayPicker } from "react-day-picker";
+
+/**
+ * Test case for issue #2585
+ *
+ * @see https://github.com/gpbl/react-day-picker/issues/2585
+ */
+export function TestCase2585() {
+  return (
+    <DayPicker
+      defaultMonth={new Date(2026, 1)}
+      showOutsideDays
+      showWeekNumber
+      fixedWeeks
+      numberOfMonths={12}
+    />
+  );
+}

examples/index.ts

@@ -70,6 +70,7 @@ export * from "./Testcase1567";
 export * from "./TestCase2047";
 export * from "./TestCase2389";
 export * from "./TestCase2511";
+export * from "./TestCase2585";
 export * from "./TimeZone";
 export * from "./Utc";
 export * from "./WeekIso";

src/helpers/getDates.test.ts

@@ -58,9 +58,7 @@ describe("when the first month and the last month are the same", () => {
         const dates = getDates(
           [month],
           undefined,
-          {
-            fixedWeeks: true
-          },
+          { fixedWeeks: true },
           defaultDateLib
         );
         expect(dates).toHaveLength(42);
@@ -69,6 +67,35 @@ describe("when the first month and the last month are the same", () => {
       });
     });
   });
+
+  describe("when the month has 4 weeks", () => {
+    const month = new Date(2026, 1); // February 2026
+    describe("when not using fixed weeks", () => {
+      it("should return 28 dates", () => {
+        const dates = getDates(
+          [month],
+          undefined,
+          {
+            fixedWeeks: false
+          },
+          defaultDateLib
+        );
+        expect(dates).toHaveLength(28);
+      });
+    });
+    describe("when using fixed weeks", () => {
+      it("should return 42 dates", () => {
+        const dates = getDates(
+          [month],
+          undefined,
+          { fixedWeeks: true },
+          defaultDateLib
+        );
+        expect(dates).toHaveLength(42);
+      });
+    });
+  });
+
   describe("when using Monday as first day of the week", () => {
     const month = new Date(2023, 4, 1);
     it("the first day should be Monday", () => {

src/helpers/getDates.ts

@@ -2,7 +2,7 @@ import { type DateLib } from "../classes/DateLib.js";
 import { type DayPickerProps } from "../types/props.js";
 
 /** The number of days in a month when having 6 weeks. */
-const NrOfDaysWithFixedWeeks = 42;
+export const NrOfDaysWithFixedWeeks = 42;
 
 /** Return all the dates to display in the calendar. */
 export function getDates(
@@ -50,7 +50,8 @@ export function getDates(
   // If fixed weeks is enabled, add the extra dates to the array
   const extraDates = NrOfDaysWithFixedWeeks * nOfMonths;
   if (fixedWeeks && dates.length < extraDates) {
-    for (let i = 0; i < 7; i++) {
+    const daysToAdd = extraDates - dates.length;
+    for (let i = 0; i < daysToAdd; i++) {
       const date = addDays(dates[dates.length - 1], 1);
       dates.push(date);
     }

src/helpers/getMonths.ts

@@ -2,6 +2,8 @@ import type { DateLib } from "../classes/DateLib.js";
 import { CalendarWeek, CalendarDay, CalendarMonth } from "../classes/index.js";
 import type { DayPickerProps } from "../types/index.js";
 
+import { NrOfDaysWithFixedWeeks } from "./getDates.js";
+
 /** Return the months to display in the calendar. */
 export function getMonths(
   /** The months (as dates) to display in the calendar. */
@@ -46,10 +48,12 @@ export function getMonths(
         return date >= firstDateOfFirstWeek && date <= lastDateOfLastWeek;
       });
 
-      if (props.fixedWeeks && monthDates.length < 42) {
+      if (props.fixedWeeks && monthDates.length < NrOfDaysWithFixedWeeks) {
         const extraDates = dates.filter((date) => {
+          const daysToAdd = NrOfDaysWithFixedWeeks - monthDates.length;
           return (
-            date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, 7)
+            date > lastDateOfLastWeek &&
+            date <= addDays(lastDateOfLastWeek, daysToAdd)
           );
         });
         monthDates.push(...extraDates);