ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Gyulai Levente 2023-09-07 15:01:09 +02:00 committed by GitHub
parent ebe13e14b0
commit b89d889fd5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 51 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/grumpy-buckets-hide.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
Render exactly 6 weeks in every months.

3
packages/ui/components/calendar/src/utils/createMonth.js
View file

@ -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;
}

32
packages/ui/components/calendar/test/lion-calendar.test.js
View file

@ -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 () => {

15
packages/ui/components/calendar/test/utils/createMonth.test.js
View file

@ -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 }),
],
}),
);
});
});