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();
+});