fix: initial month when numberOfMonths and endMonth are set (#2784)

* fix: single month even when numberOfMonths
Fixes #2782

* fix: improve initial month calculation considering numberOfMonths for navEnd

* Add MultipleWithEndMonth example component and test

* fix: update test to verify display of three months in MultipleWithEndMonth component

* Revert "fix: single month even when numberOfMonths"

This reverts commit 0167b1e.

Signed-off-by: gpbl <io@gpbl.dev>

* fix: remove startMonth prop from MultipleWithEndMonth example

* fix: update test to verify display of only three months in MultipleWithEndMonth component

* Update logic

Signed-off-by: gpbl <io@gpbl.dev>

* Update example name to MultipleMonthsWithEndMonth

Signed-off-by: gpbl <io@gpbl.dev>

* Remove unnecessary comments

Signed-off-by: gpbl <io@gpbl.dev>

---------

Signed-off-by: gpbl <io@gpbl.dev>

Author: gpbl

examples/MultipleMonthsWithEndMonth.test.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { grid } from "@/test/elements";
+import { render } from "@/test/render";
+
+import { MultipleMonthsWithEndMonth } from "./MultipleMonthsWithEndMonth";
+
+const today = new Date(2025, 6, 1);
+
+beforeAll(() => jest.setSystemTime(today));
+afterAll(() => jest.useRealTimers());
+
+beforeEach(() => {
+  render(<MultipleMonthsWithEndMonth />);
+});
+
+test("should display three months", () => {
+  expect(grid("May 2025")).toBeInTheDocument();
+  expect(grid("June 2025")).toBeInTheDocument();
+  expect(grid("July 2025")).toBeInTheDocument();
+});

examples/MultipleMonthsWithEndMonth.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+import { DayPicker } from "react-day-picker";
+
+export function MultipleMonthsWithEndMonth() {
+  return (
+    <DayPicker
+      numberOfMonths={3}
+      endMonth={new Date()}
+      pagedNavigation={false}
+    />
+  );
+}

examples/index.ts

@@ -52,6 +52,7 @@ export * from "./MultipleMinMax";
 export * from "./MultipleRequired";
 export * from "./MultipleMonths";
 export * from "./MultipleMonthsPaged";
+export * from "./MultipleMonthsWithEndMonth";
 export * from "./NavLayout";
 export * from "./NavLayoutAfter";
 export * from "./Numerals";

src/helpers/getInitialMonth.test.ts

@@ -73,7 +73,7 @@ describe("when endMonth is given", () => {
     const month = new Date(2010, 11, 12);
     const endMonth = addMonths(month, -2);
     describe("when the number of month is 1", () => {
-      it("return the endMonth", () => {
+      it("returns the endMonth as the initial month so the last displayed month does not exceed endMonth", () => {
         const initialMonth = getInitialMonth(
           { month },
           undefined,
@@ -84,14 +84,15 @@ describe("when endMonth is given", () => {
       });
     });
     describe("when the number of month is 3", () => {
-      it("return the endMonth plus the number of months", () => {
+      it("returns the initial month so that initialMonth + 2 months = endMonth (last displayed month is endMonth)", () => {
         const initialMonth = getInitialMonth(
           { month, numberOfMonths: 3 },
           undefined,
           endMonth,
           defaultDateLib
         );
-        const expectedMonth = addMonths(endMonth, -1 * (3 - 1));
+        // The last displayed month should be endMonth, so initialMonth = endMonth - 2 months
+        const expectedMonth = addMonths(endMonth, -2);
         expect(isSameMonth(initialMonth, expectedMonth)).toBe(true);
       });
     });

src/helpers/getInitialMonth.ts

@@ -36,12 +36,14 @@ export function getInitialMonth(
   let initialMonth = month || defaultMonth || today;
   const { differenceInCalendarMonths, addMonths, startOfMonth } = dateLib;
 
-  // Adjust the initial month if it is after the navEnd
-  if (navEnd && differenceInCalendarMonths(navEnd, initialMonth) < 0) {
+  if (
+    navEnd &&
+    differenceInCalendarMonths(navEnd, initialMonth) < numberOfMonths - 1
+  ) {
     const offset = -1 * (numberOfMonths - 1);
     initialMonth = addMonths(navEnd, offset);
   }
-  // Adjust the initial month if it is before the navStart
+
   if (navStart && differenceInCalendarMonths(initialMonth, navStart) < 0) {
     initialMonth = navStart;
   }