diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx index dc00e28b10e..64384afb4c4 100644 --- a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx +++ b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx @@ -64,13 +64,20 @@ const yearFormat = (date: Date) => date.getFullYear(); const buildCalendar = (year: number, month: number, weekStart: number, validators: ((date: Date) => boolean)[]) => { const defaultDate = new Date(year, month); + const firstDayOfWeek = new Date(defaultDate); firstDayOfWeek.setDate(firstDayOfWeek.getDate() - firstDayOfWeek.getDay() + weekStart); + // We will show a maximum of 6 weeks like Google calendar // Assume we just want the numbers for now... const calendarWeeks = []; + + if (firstDayOfWeek.getMonth() === defaultDate.getMonth() && firstDayOfWeek.getDate() !== 1) { + firstDayOfWeek.setDate(firstDayOfWeek.getDate() - 7); + } for (let i = 0; i < 6; i++) { const week = []; + for (let j = 0; j < 7; j++) { const date = new Date(firstDayOfWeek); week.push({ diff --git a/packages/react-core/src/components/CalendarMonth/__tests__/CalendarMonth.test.tsx b/packages/react-core/src/components/CalendarMonth/__tests__/CalendarMonth.test.tsx new file mode 100644 index 00000000000..7b70b282eda --- /dev/null +++ b/packages/react-core/src/components/CalendarMonth/__tests__/CalendarMonth.test.tsx @@ -0,0 +1,29 @@ +import React from 'react'; + +import { render, screen } from '@testing-library/react'; + +import { CalendarMonth } from '../CalendarMonth'; + +test('Renders the first date in a month when a custom weekStart is passed', () => { + // custom aria label generation function because of bug with default aria label generation + // can be removed once the bug is fixed + const formatAria = (date: Date) => + `${date.getDate()} ${date.toLocaleDateString(undefined, { month: 'long' })} ${date.getFullYear()}`; + + render(); + + const firstDate = screen.queryByRole('button', { name: '1 January 2023' }); + expect(firstDate).toBeVisible(); +}); + +test('Renders the last date in a month when a custom weekStart is passed', () => { + // custom aria label generation function because of bug with default aria labels + // can be removed once the bug is fixed + const formatAria = (date: Date) => + `${date.getDate()} ${date.toLocaleDateString(undefined, { month: 'long' })} ${date.getFullYear()}`; + + render(); + + const lastDate = screen.queryByRole('button', { name: '31 January 2023' }); + expect(lastDate).toBeVisible(); +});