fix(calendar): render exactly 6 weeks in every months (#2037)

ing-bank · Sep 7, 2023 · b89d889 · b89d889
1 parent ebe13e1
commit b89d889
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 4 deletions.
diff --git a/.changeset/grumpy-buckets-hide.md b/.changeset/grumpy-buckets-hide.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+Render exactly 6 weeks in every months.
diff --git a/packages/ui/components/calendar/src/utils/createMonth.js b/packages/ui/components/calendar/src/utils/createMonth.js
@@ -13,7 +13,6 @@ export function createMonth(date, { firstDayOfWeek = 0 } = {}) {
   }
   const firstDayOfMonth = new Date(date);
   firstDayOfMonth.setDate(1);
-  const monthNumber = firstDayOfMonth.getMonth();
   const weekOptions = { firstDayOfWeek };
 
   const month = {
@@ -27,7 +26,7 @@ export function createMonth(date, { firstDayOfWeek = 0 } = {}) {
     const firstDayOfNextWeek = new Date(nextWeek.days[6].date); // last day of current week
     firstDayOfNextWeek.setDate(firstDayOfNextWeek.getDate() + 1); // make it first day of next week
     nextWeek = createWeek(firstDayOfNextWeek, weekOptions);
-  } while (nextWeek.days[0].date.getMonth() === monthNumber);
+  } while (month.weeks.length !== 6);
 
   return month;
 }
diff --git a/packages/ui/components/calendar/test/lion-calendar.test.js b/packages/ui/components/calendar/test/lion-calendar.test.js
@@ -1280,11 +1280,25 @@ describe('<lion-calendar>', () => {
         expect(previousMonthDayObjs[2].cellIndex).to.equal(2);
         expect(previousMonthDayObjs[2].monthday).to.equal(31);
 
-        expect(nextMonthDayObjs.length).to.equal(2);
+        expect(nextMonthDayObjs.length).to.equal(9);
         expect(nextMonthDayObjs[0].cellIndex).to.equal(5);
         expect(nextMonthDayObjs[0].monthday).to.equal(1);
         expect(nextMonthDayObjs[1].cellIndex).to.equal(6);
         expect(nextMonthDayObjs[1].monthday).to.equal(2);
+        expect(nextMonthDayObjs[2].cellIndex).to.equal(0);
+        expect(nextMonthDayObjs[2].monthday).to.equal(3);
+        expect(nextMonthDayObjs[3].cellIndex).to.equal(1);
+        expect(nextMonthDayObjs[3].monthday).to.equal(4);
+        expect(nextMonthDayObjs[4].cellIndex).to.equal(2);
+        expect(nextMonthDayObjs[4].monthday).to.equal(5);
+        expect(nextMonthDayObjs[5].cellIndex).to.equal(3);
+        expect(nextMonthDayObjs[5].monthday).to.equal(6);
+        expect(nextMonthDayObjs[6].cellIndex).to.equal(4);
+        expect(nextMonthDayObjs[6].monthday).to.equal(7);
+        expect(nextMonthDayObjs[7].cellIndex).to.equal(5);
+        expect(nextMonthDayObjs[7].monthday).to.equal(8);
+        expect(nextMonthDayObjs[8].cellIndex).to.equal(6);
+        expect(nextMonthDayObjs[8].monthday).to.equal(9);
       });
 
       it('renders days for next months in the last month of the year', async () => {
@@ -1294,11 +1308,25 @@ describe('<lion-calendar>', () => {
           `),
         );
         const { nextMonthDayObjs } = elObj;
-        expect(nextMonthDayObjs.length).to.equal(2);
+        expect(nextMonthDayObjs.length).to.equal(9);
         expect(nextMonthDayObjs[0].cellIndex).to.equal(5);
         expect(nextMonthDayObjs[0].monthday).to.equal(1);
         expect(nextMonthDayObjs[1].cellIndex).to.equal(6);
         expect(nextMonthDayObjs[1].monthday).to.equal(2);
+        expect(nextMonthDayObjs[2].cellIndex).to.equal(0);
+        expect(nextMonthDayObjs[2].monthday).to.equal(3);
+        expect(nextMonthDayObjs[3].cellIndex).to.equal(1);
+        expect(nextMonthDayObjs[3].monthday).to.equal(4);
+        expect(nextMonthDayObjs[4].cellIndex).to.equal(2);
+        expect(nextMonthDayObjs[4].monthday).to.equal(5);
+        expect(nextMonthDayObjs[5].cellIndex).to.equal(3);
+        expect(nextMonthDayObjs[5].monthday).to.equal(6);
+        expect(nextMonthDayObjs[6].cellIndex).to.equal(4);
+        expect(nextMonthDayObjs[6].monthday).to.equal(7);
+        expect(nextMonthDayObjs[7].cellIndex).to.equal(5);
+        expect(nextMonthDayObjs[7].monthday).to.equal(8);
+        expect(nextMonthDayObjs[8].cellIndex).to.equal(6);
+        expect(nextMonthDayObjs[8].monthday).to.equal(9);
       });
 
       it('renders days for previous months in the first month of the year', async () => {

diff --git a/packages/ui/components/calendar/test/utils/createMonth.test.js b/packages/ui/components/calendar/test/utils/createMonth.test.js
@@ -46,4 +46,19 @@ describe('createMonth', () => {
       }),
     );
   });
+
+  it('creates exactly 6 weeks in every months', () => {
+    expect(compareMonth(createMonth(new Date('2026/02/12')))).to.deep.equal(
+      compareMonth({
+        weeks: [
+          createWeek(new Date('2026/02/01'), { firstDayOfWeek: 0 }),
+          createWeek(new Date('2026/02/08'), { firstDayOfWeek: 0 }),
+          createWeek(new Date('2026/02/15'), { firstDayOfWeek: 0 }),
+          createWeek(new Date('2026/02/22'), { firstDayOfWeek: 0 }),
+          createWeek(new Date('2026/03/01'), { firstDayOfWeek: 0 }),
+          createWeek(new Date('2026/03/08'), { firstDayOfWeek: 0 }),
+        ],
+      }),
+    );
+  });
 });