From eacbf3e83aa458960359dedbebe98b31451459dc Mon Sep 17 00:00:00 2001
From: MariaBanaszkiewicz <xmox@interia.pl>
Date: Tue, 19 Nov 2024 15:24:04 +0100
Subject: [PATCH 1/4] add week numbers to month component

---
 .../dates/src/components/Calendar/Calendar.tsx  |  2 ++
 .../dates/src/components/Month/Month.module.css |  7 +++++++
 .../dates/src/components/Month/Month.story.tsx  |  4 ++++
 .../dates/src/components/Month/Month.tsx        | 17 +++++++++++++++++
 .../Month/get-week-number/get-week-number.ts    | 10 ++++++++++
 .../src/components/MonthLevel/MonthLevel.tsx    |  2 ++
 .../MonthLevelGroup/MonthLevelGroup.tsx         |  2 ++
 .../src/components/WeekdaysRow/WeekdaysRow.tsx  |  5 +++++
 scripts/build/rollup/rollup-externals.ts        |  1 +
 9 files changed, 50 insertions(+)
 create mode 100644 packages/@mantine/dates/src/components/Month/get-week-number/get-week-number.ts

diff --git a/packages/@mantine/dates/src/components/Calendar/Calendar.tsx b/packages/@mantine/dates/src/components/Calendar/Calendar.tsx
index 484253112fa..0cbfed7a724 100644
--- a/packages/@mantine/dates/src/components/Calendar/Calendar.tsx
+++ b/packages/@mantine/dates/src/components/Calendar/Calendar.tsx
@@ -204,6 +204,7 @@ export const Calendar = factory<CalendarFactory>((_props, ref) => {
     __onDayMouseEnter,
     withCellSpacing,
     highlightToday,
+    showWeekNumbers,
 
     // YearLevelGroup props
     monthsListFormat,
@@ -349,6 +350,7 @@ export const Calendar = factory<CalendarFactory>((_props, ref) => {
           static={isStatic}
           withCellSpacing={withCellSpacing}
           highlightToday={highlightToday}
+          showWeekNumbers={showWeekNumbers}
           {...stylesApiProps}
         />
       )}
diff --git a/packages/@mantine/dates/src/components/Month/Month.module.css b/packages/@mantine/dates/src/components/Month/Month.module.css
index ac4073754fd..a7b1bbbd4b7 100644
--- a/packages/@mantine/dates/src/components/Month/Month.module.css
+++ b/packages/@mantine/dates/src/components/Month/Month.module.css
@@ -10,3 +10,10 @@
     padding: 0.5px;
   }
 }
+
+.weekNumber {
+  color: var(--mantine-color-dimmed);
+  font-weight: normal;
+  font-size: var(--wn-fz, var(--mantine-font-size-sm));
+  text-align: center;
+}
diff --git a/packages/@mantine/dates/src/components/Month/Month.story.tsx b/packages/@mantine/dates/src/components/Month/Month.story.tsx
index 34c5f020588..a4ce06b1ded 100644
--- a/packages/@mantine/dates/src/components/Month/Month.story.tsx
+++ b/packages/@mantine/dates/src/components/Month/Month.story.tsx
@@ -100,3 +100,7 @@ export function Sizes() {
   ));
   return sizes;
 }
+
+export function showWeekNumbers() {
+  return <Wrapper showWeekNumbers />;
+}
diff --git a/packages/@mantine/dates/src/components/Month/Month.tsx b/packages/@mantine/dates/src/components/Month/Month.tsx
index 7f189154e90..133f956aca5 100644
--- a/packages/@mantine/dates/src/components/Month/Month.tsx
+++ b/packages/@mantine/dates/src/components/Month/Month.tsx
@@ -2,9 +2,11 @@ import dayjs from 'dayjs';
 import {
   Box,
   BoxProps,
+  createVarsResolver,
   ElementProps,
   factory,
   Factory,
+  getFontSize,
   MantineSize,
   StylesApiProps,
   useProps,
@@ -21,6 +23,7 @@ import { isAfterMinDate } from './is-after-min-date/is-after-min-date';
 import { isBeforeMaxDate } from './is-before-max-date/is-before-max-date';
 import { isSameMonth } from './is-same-month/is-same-month';
 import classes from './Month.module.css';
+import { getWeekNumber } from './get-week-number/get-week-number';
 
 export type MonthStylesNames =
   | 'month'
@@ -31,6 +34,7 @@ export type MonthStylesNames =
   | 'monthThead'
   | 'monthTbody'
   | 'monthCell'
+  | 'weekNumber'
   | DayStylesNames;
 
 export interface MonthSettings {
@@ -99,6 +103,9 @@ export interface MonthSettings {
 
   /** Determines whether today should be highlighted with a border, `false` by default */
   highlightToday?: boolean;
+
+  /** Determines whether week numbers should be displayed */
+  showWeekNumbers?: boolean;
 }
 
 export interface MonthProps
@@ -125,6 +132,12 @@ const defaultProps: Partial<MonthProps> = {
   withCellSpacing: true,
 };
 
+const varsResolver = createVarsResolver<MonthFactory>((_, { size }) => ({
+  weekNumber: {
+    '--wn-fz': getFontSize(size),
+  },
+}));
+
 export const Month = factory<MonthFactory>((_props, ref) => {
   const props = useProps('Month', defaultProps, _props);
   const {
@@ -158,6 +171,7 @@ export const Month = factory<MonthFactory>((_props, ref) => {
     withCellSpacing,
     size,
     highlightToday,
+    showWeekNumbers,
     ...others
   } = props;
 
@@ -171,6 +185,7 @@ export const Month = factory<MonthFactory>((_props, ref) => {
     styles,
     unstyled,
     vars,
+    varsResolver,
     rootSelector: 'month',
   });
 
@@ -261,6 +276,7 @@ export const Month = factory<MonthFactory>((_props, ref) => {
 
     return (
       <tr key={rowIndex} {...getStyles('monthRow')}>
+        {showWeekNumbers && <td {...getStyles('weekNumber')}>{getWeekNumber(row)}</td>}
         {cells}
       </tr>
     );
@@ -279,6 +295,7 @@ export const Month = factory<MonthFactory>((_props, ref) => {
             classNames={resolvedClassNames}
             styles={resolvedStyles}
             unstyled={unstyled}
+            showWeekNumbers={showWeekNumbers}
           />
         </thead>
       )}
diff --git a/packages/@mantine/dates/src/components/Month/get-week-number/get-week-number.ts b/packages/@mantine/dates/src/components/Month/get-week-number/get-week-number.ts
new file mode 100644
index 00000000000..33e92b13ddb
--- /dev/null
+++ b/packages/@mantine/dates/src/components/Month/get-week-number/get-week-number.ts
@@ -0,0 +1,10 @@
+import dayjs from 'dayjs';
+import isoWeek from 'dayjs/plugin/isoWeek';
+
+dayjs.extend(isoWeek);
+
+export function getWeekNumber(
+  week: Date[]): number {
+  const monday = week.find((date) => dayjs(date).day() === 1);
+  return dayjs(monday).isoWeek();
+}
diff --git a/packages/@mantine/dates/src/components/MonthLevel/MonthLevel.tsx b/packages/@mantine/dates/src/components/MonthLevel/MonthLevel.tsx
index eec35872f99..7c836697ce2 100644
--- a/packages/@mantine/dates/src/components/MonthLevel/MonthLevel.tsx
+++ b/packages/@mantine/dates/src/components/MonthLevel/MonthLevel.tsx
@@ -77,6 +77,7 @@ export const MonthLevel = factory<MonthLevelFactory>((_props, ref) => {
     __onDayMouseEnter,
     withCellSpacing,
     highlightToday,
+    showWeekNumbers,
 
     // CalendarHeader settings
     __preventFocus,
@@ -181,6 +182,7 @@ export const MonthLevel = factory<MonthLevelFactory>((_props, ref) => {
         static={isStatic}
         withCellSpacing={withCellSpacing}
         highlightToday={highlightToday}
+        showWeekNumbers={showWeekNumbers}
         {...stylesApiProps}
       />
     </Box>
diff --git a/packages/@mantine/dates/src/components/MonthLevelGroup/MonthLevelGroup.tsx b/packages/@mantine/dates/src/components/MonthLevelGroup/MonthLevelGroup.tsx
index 8c94864c5bc..00249cf3b39 100644
--- a/packages/@mantine/dates/src/components/MonthLevelGroup/MonthLevelGroup.tsx
+++ b/packages/@mantine/dates/src/components/MonthLevelGroup/MonthLevelGroup.tsx
@@ -60,6 +60,7 @@ export const MonthLevelGroup = factory<MonthLevelGroupFactory>((_props, ref) =>
     __onDayMouseEnter,
     withCellSpacing,
     highlightToday,
+    showWeekNumbers,
 
     // CalendarHeader settings
     __preventFocus,
@@ -162,6 +163,7 @@ export const MonthLevelGroup = factory<MonthLevelGroupFactory>((_props, ref) =>
           static={isStatic}
           withCellSpacing={withCellSpacing}
           highlightToday={highlightToday}
+          showWeekNumbers={showWeekNumbers}
         />
       );
     });
diff --git a/packages/@mantine/dates/src/components/WeekdaysRow/WeekdaysRow.tsx b/packages/@mantine/dates/src/components/WeekdaysRow/WeekdaysRow.tsx
index d47897940a2..c685f8f6134 100644
--- a/packages/@mantine/dates/src/components/WeekdaysRow/WeekdaysRow.tsx
+++ b/packages/@mantine/dates/src/components/WeekdaysRow/WeekdaysRow.tsx
@@ -42,6 +42,9 @@ export interface WeekdaysRowProps
 
   /** Choose cell type that will be used to render weekdays, defaults to th */
   cellComponent?: 'td' | 'th';
+
+  /** Determines whether week numbers should be displayed */
+  showWeekNumbers?: boolean;
 }
 
 export type WeekdaysRowFactory = Factory<{
@@ -74,6 +77,7 @@ export const WeekdaysRow = factory<WeekdaysRowFactory>((_props, ref) => {
     weekdayFormat,
     cellComponent: CellComponent = 'th',
     __staticSelector,
+    showWeekNumbers,
     ...others
   } = props;
 
@@ -105,6 +109,7 @@ export const WeekdaysRow = factory<WeekdaysRowFactory>((_props, ref) => {
 
   return (
     <Box component="tr" ref={ref} {...getStyles('weekdaysRow')} {...others}>
+      {showWeekNumbers && <CellComponent {...getStyles('weekday')}>#</CellComponent>}
       {weekdays}
     </Box>
   );
diff --git a/scripts/build/rollup/rollup-externals.ts b/scripts/build/rollup/rollup-externals.ts
index dbc5717a905..626a8e4572b 100644
--- a/scripts/build/rollup/rollup-externals.ts
+++ b/scripts/build/rollup/rollup-externals.ts
@@ -7,6 +7,7 @@ export const ROLLUP_EXTERNALS = [
   'dayjs/plugin/customParseFormat',
   'dayjs/plugin/utc.js',
   'dayjs/plugin/timezone.js',
+  'dayjs/plugin/isoWeek.js',
   'klona/full',
   'highlight.js/lib/languages/typescript',
   'react-is',

From bf2e4b7583d6ebc10f2fc0e3ee994d67ccda3115 Mon Sep 17 00:00:00 2001
From: MariaBanaszkiewicz <xmox@interia.pl>
Date: Wed, 27 Nov 2024 22:42:15 +0100
Subject: [PATCH 2/4] add date picker demo and test

---
 .../DatePicker.demo.showWeekNumbers.tsx       | 21 ++++++++++
 .../DatePicker/DatePicker.demos.story.tsx     |  5 +++
 .../demos/src/demos/dates/DatePicker/index.ts |  1 +
 .../CalendarHeader/CalendarHeader.module.css  |  2 +-
 .../src/components/Month/Month.module.css     |  2 +
 .../dates/src/components/Month/Month.tsx      |  2 +
 .../get-week-number/get-week-number.test.ts   | 42 +++++++++++++++++++
 .../Month/get-week-number/get-week-number.ts  |  2 +-
 8 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 packages/@docs/demos/src/demos/dates/DatePicker/DatePicker.demo.showWeekNumbers.tsx
 create mode 100644 packages/@mantine/dates/src/components/Month/get-week-number/get-week-number.test.ts

diff --git a/packages/@docs/demos/src/demos/dates/DatePicker/DatePicker.demo.showWeekNumbers.tsx b/packages/@docs/demos/src/demos/dates/DatePicker/DatePicker.demo.showWeekNumbers.tsx
new file mode 100644
index 00000000000..936af84340e
--- /dev/null
+++ b/packages/@docs/demos/src/demos/dates/DatePicker/DatePicker.demo.showWeekNumbers.tsx
@@ -0,0 +1,21 @@
+import { DatePicker } from '@mantine/dates';
+import { MantineDemo } from '@mantinex/demo';
+
+const code = `
+import { DatePicker } from '@mantine/dates';
+
+function Demo() {
+  return <DatePicker showWeekNumbers />;
+}
+`;
+
+function Demo() {
+  return <DatePicker showWeekNumbers />;
+}
+
+export const showWeekNumbers: MantineDemo = {
+  type: 'code',
+  centered: true,
+  component: Demo,
+  code,
+};
diff --git a/packages/@docs/demos/src/demos/dates/DatePicker/DatePicker.demos.story.tsx b/packages/@docs/demos/src/demos/dates/DatePicker/DatePicker.demos.story.tsx
index 4a2fd58db67..dcbd8eabdc3 100644
--- a/packages/@docs/demos/src/demos/dates/DatePicker/DatePicker.demos.story.tsx
+++ b/packages/@docs/demos/src/demos/dates/DatePicker/DatePicker.demos.story.tsx
@@ -112,3 +112,8 @@ export const Demo_excludeDate = {
   name: '⭐ Demo: excludeDate',
   render: renderDemo(demos.excludeDate),
 };
+
+export const Demo_showWeekNumbers = {
+  name: '⭐ Demo: showWeekNumbers',
+  render: renderDemo(demos.showWeekNumbers),
+};
diff --git a/packages/@docs/demos/src/demos/dates/DatePicker/index.ts b/packages/@docs/demos/src/demos/dates/DatePicker/index.ts
index 09d04b3abe3..42c66acf0d3 100644
--- a/packages/@docs/demos/src/demos/dates/DatePicker/index.ts
+++ b/packages/@docs/demos/src/demos/dates/DatePicker/index.ts
@@ -19,3 +19,4 @@ export { renderDay } from './DatePicker.demo.renderDay';
 export { hideWeekdays } from './DatePicker.demo.hideWeekdays';
 export { hideOutsideDates } from './DatePicker.demo.hideOutsideDates';
 export { excludeDate } from './DatePicker.demo.excludeDate';
+export { showWeekNumbers } from './DatePicker.demo.showWeekNumbers';
diff --git a/packages/@mantine/dates/src/components/CalendarHeader/CalendarHeader.module.css b/packages/@mantine/dates/src/components/CalendarHeader/CalendarHeader.module.css
index 553ad308646..b00dd8abc14 100644
--- a/packages/@mantine/dates/src/components/CalendarHeader/CalendarHeader.module.css
+++ b/packages/@mantine/dates/src/components/CalendarHeader/CalendarHeader.module.css
@@ -7,7 +7,7 @@
   --dch-control-size: var(--dch-control-size-sm);
 
   display: flex;
-  max-width: calc(var(--dch-control-size) * 7 + rem(7px));
+  max-width: calc(var(--dch-control-size) * 8 + rem(7px));
   margin-bottom: var(--mantine-spacing-xs);
 }
 
diff --git a/packages/@mantine/dates/src/components/Month/Month.module.css b/packages/@mantine/dates/src/components/Month/Month.module.css
index a7b1bbbd4b7..daefb4c56b1 100644
--- a/packages/@mantine/dates/src/components/Month/Month.module.css
+++ b/packages/@mantine/dates/src/components/Month/Month.module.css
@@ -12,8 +12,10 @@
 }
 
 .weekNumber {
+  --wn-size-sm: 36px;
   color: var(--mantine-color-dimmed);
   font-weight: normal;
   font-size: var(--wn-fz, var(--mantine-font-size-sm));
   text-align: center;
+  width: var(--wn-size, var(--wn-size-sm));
 }
diff --git a/packages/@mantine/dates/src/components/Month/Month.tsx b/packages/@mantine/dates/src/components/Month/Month.tsx
index 133f956aca5..7ee7a482911 100644
--- a/packages/@mantine/dates/src/components/Month/Month.tsx
+++ b/packages/@mantine/dates/src/components/Month/Month.tsx
@@ -7,6 +7,7 @@ import {
   factory,
   Factory,
   getFontSize,
+  getSize,
   MantineSize,
   StylesApiProps,
   useProps,
@@ -135,6 +136,7 @@ const defaultProps: Partial<MonthProps> = {
 const varsResolver = createVarsResolver<MonthFactory>((_, { size }) => ({
   weekNumber: {
     '--wn-fz': getFontSize(size),
+    '--wn-size': getSize(size, 'wn-size'),
   },
 }));
 
diff --git a/packages/@mantine/dates/src/components/Month/get-week-number/get-week-number.test.ts b/packages/@mantine/dates/src/components/Month/get-week-number/get-week-number.test.ts
new file mode 100644
index 00000000000..61c2a32fa11
--- /dev/null
+++ b/packages/@mantine/dates/src/components/Month/get-week-number/get-week-number.test.ts
@@ -0,0 +1,42 @@
+import { getWeekNumber } from './get-week-number';
+
+describe('@mantine/dates/get-week-number', () => {
+  it('should return the correct ISO week number for a given week', () => {
+    const week = [
+      new Date('2023-01-02'), // Monday
+      new Date('2023-01-03'), // Tuesday
+      new Date('2023-01-04'), // Wednesday
+      new Date('2023-01-05'), // Thursday
+      new Date('2023-01-06'), // Friday
+      new Date('2023-01-07'), // Saturday
+      new Date('2023-01-08'), // Sunday
+    ];
+    expect(getWeekNumber(week)).toBe(1);
+  });
+
+  it('should return the correct ISO week number when the week spans two years', () => {
+    const week = [
+      new Date('2022-12-26'), // Monday
+      new Date('2022-12-27'), // Tuesday
+      new Date('2022-12-28'), // Wednesday
+      new Date('2022-12-29'), // Thursday
+      new Date('2022-12-30'), // Friday
+      new Date('2022-12-31'), // Saturday
+      new Date('2023-01-01'), // Sunday
+    ];
+    expect(getWeekNumber(week)).toBe(52);
+  });
+
+  it('should return the correct ISO week number for a week in the middle of the year', () => {
+    const week = [
+      new Date('2023-06-12'), // Monday
+      new Date('2023-06-13'), // Tuesday
+      new Date('2023-06-14'), // Wednesday
+      new Date('2023-06-15'), // Thursday
+      new Date('2023-06-16'), // Friday
+      new Date('2023-06-17'), // Saturday
+      new Date('2023-06-18'), // Sunday
+    ];
+    expect(getWeekNumber(week)).toBe(24);
+  });
+});
diff --git a/packages/@mantine/dates/src/components/Month/get-week-number/get-week-number.ts b/packages/@mantine/dates/src/components/Month/get-week-number/get-week-number.ts
index 33e92b13ddb..3fbabf871ce 100644
--- a/packages/@mantine/dates/src/components/Month/get-week-number/get-week-number.ts
+++ b/packages/@mantine/dates/src/components/Month/get-week-number/get-week-number.ts
@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import isoWeek from 'dayjs/plugin/isoWeek';
+import isoWeek from 'dayjs/plugin/isoWeek.js';
 
 dayjs.extend(isoWeek);
 

From 4d2690b2f9883a62e1f1922ec25a2d0effd7cbfe Mon Sep 17 00:00:00 2001
From: MariaBanaszkiewicz <xmox@interia.pl>
Date: Wed, 27 Nov 2024 22:58:49 +0100
Subject: [PATCH 3/4] fix prettier and types issues

---
 packages/@docs/styles-api/src/data/Dates.styles-api.ts         | 1 +
 packages/@mantine/dates/src/components/Month/Month.tsx         | 2 +-
 .../src/components/Month/get-week-number/get-week-number.ts    | 3 +--
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/@docs/styles-api/src/data/Dates.styles-api.ts b/packages/@docs/styles-api/src/data/Dates.styles-api.ts
index 1db27743fe4..10877acc789 100644
--- a/packages/@docs/styles-api/src/data/Dates.styles-api.ts
+++ b/packages/@docs/styles-api/src/data/Dates.styles-api.ts
@@ -28,6 +28,7 @@ export const MonthStylesApi: StylesApiData<MonthFactory> = {
     weekdaysRow: 'Weekdays tr element',
     weekday: 'Weekday th element',
     day: 'Month day control',
+    weekNumber: 'Week number td element',
   },
 
   vars: {},
diff --git a/packages/@mantine/dates/src/components/Month/Month.tsx b/packages/@mantine/dates/src/components/Month/Month.tsx
index 7ee7a482911..cc8080ad192 100644
--- a/packages/@mantine/dates/src/components/Month/Month.tsx
+++ b/packages/@mantine/dates/src/components/Month/Month.tsx
@@ -20,11 +20,11 @@ import { Day, DayProps, DayStylesNames } from '../Day';
 import { WeekdaysRow } from '../WeekdaysRow';
 import { getDateInTabOrder } from './get-date-in-tab-order/get-date-in-tab-order';
 import { getMonthDays } from './get-month-days/get-month-days';
+import { getWeekNumber } from './get-week-number/get-week-number';
 import { isAfterMinDate } from './is-after-min-date/is-after-min-date';
 import { isBeforeMaxDate } from './is-before-max-date/is-before-max-date';
 import { isSameMonth } from './is-same-month/is-same-month';
 import classes from './Month.module.css';
-import { getWeekNumber } from './get-week-number/get-week-number';
 
 export type MonthStylesNames =
   | 'month'
diff --git a/packages/@mantine/dates/src/components/Month/get-week-number/get-week-number.ts b/packages/@mantine/dates/src/components/Month/get-week-number/get-week-number.ts
index 3fbabf871ce..4d414198590 100644
--- a/packages/@mantine/dates/src/components/Month/get-week-number/get-week-number.ts
+++ b/packages/@mantine/dates/src/components/Month/get-week-number/get-week-number.ts
@@ -3,8 +3,7 @@ import isoWeek from 'dayjs/plugin/isoWeek.js';
 
 dayjs.extend(isoWeek);
 
-export function getWeekNumber(
-  week: Date[]): number {
+export function getWeekNumber(week: Date[]): number {
   const monday = week.find((date) => dayjs(date).day() === 1);
   return dayjs(monday).isoWeek();
 }

From e817c63b7cb47ebcc00a097d2500a161fb8ac1c0 Mon Sep 17 00:00:00 2001
From: MariaBanaszkiewicz <xmox@interia.pl>
Date: Thu, 28 Nov 2024 09:47:00 +0100
Subject: [PATCH 4/4] changes after review

---
 ...eekNumbers.tsx => DatePicker.demo.withWeekNumbers.tsx} | 6 +++---
 .../src/demos/dates/DatePicker/DatePicker.demos.story.tsx | 6 +++---
 packages/@docs/demos/src/demos/dates/DatePicker/index.ts  | 2 +-
 .../@mantine/dates/src/components/Calendar/Calendar.tsx   | 4 ++--
 .../@mantine/dates/src/components/Month/Month.module.css  | 4 ++++
 .../@mantine/dates/src/components/Month/Month.story.tsx   | 4 ++--
 packages/@mantine/dates/src/components/Month/Month.tsx    | 8 ++++----
 .../dates/src/components/MonthLevel/MonthLevel.tsx        | 4 ++--
 .../src/components/MonthLevelGroup/MonthLevelGroup.tsx    | 4 ++--
 .../dates/src/components/WeekdaysRow/WeekdaysRow.tsx      | 6 +++---
 10 files changed, 26 insertions(+), 22 deletions(-)
 rename packages/@docs/demos/src/demos/dates/DatePicker/{DatePicker.demo.showWeekNumbers.tsx => DatePicker.demo.withWeekNumbers.tsx} (67%)

diff --git a/packages/@docs/demos/src/demos/dates/DatePicker/DatePicker.demo.showWeekNumbers.tsx b/packages/@docs/demos/src/demos/dates/DatePicker/DatePicker.demo.withWeekNumbers.tsx
similarity index 67%
rename from packages/@docs/demos/src/demos/dates/DatePicker/DatePicker.demo.showWeekNumbers.tsx
rename to packages/@docs/demos/src/demos/dates/DatePicker/DatePicker.demo.withWeekNumbers.tsx
index 936af84340e..2f856b4c9d6 100644
--- a/packages/@docs/demos/src/demos/dates/DatePicker/DatePicker.demo.showWeekNumbers.tsx
+++ b/packages/@docs/demos/src/demos/dates/DatePicker/DatePicker.demo.withWeekNumbers.tsx
@@ -5,15 +5,15 @@ const code = `
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
-  return <DatePicker showWeekNumbers />;
+  return <DatePicker withWeekNumbers />;
 }
 `;
 
 function Demo() {
-  return <DatePicker showWeekNumbers />;
+  return <DatePicker withWeekNumbers />;
 }
 
-export const showWeekNumbers: MantineDemo = {
+export const withWeekNumbers: MantineDemo = {
   type: 'code',
   centered: true,
   component: Demo,
diff --git a/packages/@docs/demos/src/demos/dates/DatePicker/DatePicker.demos.story.tsx b/packages/@docs/demos/src/demos/dates/DatePicker/DatePicker.demos.story.tsx
index dcbd8eabdc3..f1a879231c3 100644
--- a/packages/@docs/demos/src/demos/dates/DatePicker/DatePicker.demos.story.tsx
+++ b/packages/@docs/demos/src/demos/dates/DatePicker/DatePicker.demos.story.tsx
@@ -113,7 +113,7 @@ export const Demo_excludeDate = {
   render: renderDemo(demos.excludeDate),
 };
 
-export const Demo_showWeekNumbers = {
-  name: '⭐ Demo: showWeekNumbers',
-  render: renderDemo(demos.showWeekNumbers),
+export const Demo_withWeekNumbers = {
+  name: '⭐ Demo: withWeekNumbers',
+  render: renderDemo(demos.withWeekNumbers),
 };
diff --git a/packages/@docs/demos/src/demos/dates/DatePicker/index.ts b/packages/@docs/demos/src/demos/dates/DatePicker/index.ts
index 42c66acf0d3..a9edbe4e366 100644
--- a/packages/@docs/demos/src/demos/dates/DatePicker/index.ts
+++ b/packages/@docs/demos/src/demos/dates/DatePicker/index.ts
@@ -19,4 +19,4 @@ export { renderDay } from './DatePicker.demo.renderDay';
 export { hideWeekdays } from './DatePicker.demo.hideWeekdays';
 export { hideOutsideDates } from './DatePicker.demo.hideOutsideDates';
 export { excludeDate } from './DatePicker.demo.excludeDate';
-export { showWeekNumbers } from './DatePicker.demo.showWeekNumbers';
+export { withWeekNumbers } from './DatePicker.demo.withWeekNumbers';
diff --git a/packages/@mantine/dates/src/components/Calendar/Calendar.tsx b/packages/@mantine/dates/src/components/Calendar/Calendar.tsx
index 0cbfed7a724..08cda126f88 100644
--- a/packages/@mantine/dates/src/components/Calendar/Calendar.tsx
+++ b/packages/@mantine/dates/src/components/Calendar/Calendar.tsx
@@ -204,7 +204,7 @@ export const Calendar = factory<CalendarFactory>((_props, ref) => {
     __onDayMouseEnter,
     withCellSpacing,
     highlightToday,
-    showWeekNumbers,
+    withWeekNumbers,
 
     // YearLevelGroup props
     monthsListFormat,
@@ -350,7 +350,7 @@ export const Calendar = factory<CalendarFactory>((_props, ref) => {
           static={isStatic}
           withCellSpacing={withCellSpacing}
           highlightToday={highlightToday}
-          showWeekNumbers={showWeekNumbers}
+          withWeekNumbers={withWeekNumbers}
           {...stylesApiProps}
         />
       )}
diff --git a/packages/@mantine/dates/src/components/Month/Month.module.css b/packages/@mantine/dates/src/components/Month/Month.module.css
index daefb4c56b1..ccc3f258410 100644
--- a/packages/@mantine/dates/src/components/Month/Month.module.css
+++ b/packages/@mantine/dates/src/components/Month/Month.module.css
@@ -12,7 +12,11 @@
 }
 
 .weekNumber {
+  --wn-size-xs: 30px;
   --wn-size-sm: 36px;
+  --wn-size-md: 42px;
+  --wn-size-lg: 48px;
+  --wn-size-xl: 54px;
   color: var(--mantine-color-dimmed);
   font-weight: normal;
   font-size: var(--wn-fz, var(--mantine-font-size-sm));
diff --git a/packages/@mantine/dates/src/components/Month/Month.story.tsx b/packages/@mantine/dates/src/components/Month/Month.story.tsx
index a4ce06b1ded..91b6c621ad5 100644
--- a/packages/@mantine/dates/src/components/Month/Month.story.tsx
+++ b/packages/@mantine/dates/src/components/Month/Month.story.tsx
@@ -101,6 +101,6 @@ export function Sizes() {
   return sizes;
 }
 
-export function showWeekNumbers() {
-  return <Wrapper showWeekNumbers />;
+export function withWeekNumbers() {
+  return <Wrapper withWeekNumbers />;
 }
diff --git a/packages/@mantine/dates/src/components/Month/Month.tsx b/packages/@mantine/dates/src/components/Month/Month.tsx
index cc8080ad192..af55c4e3eb2 100644
--- a/packages/@mantine/dates/src/components/Month/Month.tsx
+++ b/packages/@mantine/dates/src/components/Month/Month.tsx
@@ -106,7 +106,7 @@ export interface MonthSettings {
   highlightToday?: boolean;
 
   /** Determines whether week numbers should be displayed */
-  showWeekNumbers?: boolean;
+  withWeekNumbers?: boolean;
 }
 
 export interface MonthProps
@@ -173,7 +173,7 @@ export const Month = factory<MonthFactory>((_props, ref) => {
     withCellSpacing,
     size,
     highlightToday,
-    showWeekNumbers,
+    withWeekNumbers,
     ...others
   } = props;
 
@@ -278,7 +278,7 @@ export const Month = factory<MonthFactory>((_props, ref) => {
 
     return (
       <tr key={rowIndex} {...getStyles('monthRow')}>
-        {showWeekNumbers && <td {...getStyles('weekNumber')}>{getWeekNumber(row)}</td>}
+        {withWeekNumbers && <td {...getStyles('weekNumber')}>{getWeekNumber(row)}</td>}
         {cells}
       </tr>
     );
@@ -297,7 +297,7 @@ export const Month = factory<MonthFactory>((_props, ref) => {
             classNames={resolvedClassNames}
             styles={resolvedStyles}
             unstyled={unstyled}
-            showWeekNumbers={showWeekNumbers}
+            withWeekNumbers={withWeekNumbers}
           />
         </thead>
       )}
diff --git a/packages/@mantine/dates/src/components/MonthLevel/MonthLevel.tsx b/packages/@mantine/dates/src/components/MonthLevel/MonthLevel.tsx
index 7c836697ce2..a1ed55a3f18 100644
--- a/packages/@mantine/dates/src/components/MonthLevel/MonthLevel.tsx
+++ b/packages/@mantine/dates/src/components/MonthLevel/MonthLevel.tsx
@@ -77,7 +77,7 @@ export const MonthLevel = factory<MonthLevelFactory>((_props, ref) => {
     __onDayMouseEnter,
     withCellSpacing,
     highlightToday,
-    showWeekNumbers,
+    withWeekNumbers,
 
     // CalendarHeader settings
     __preventFocus,
@@ -182,7 +182,7 @@ export const MonthLevel = factory<MonthLevelFactory>((_props, ref) => {
         static={isStatic}
         withCellSpacing={withCellSpacing}
         highlightToday={highlightToday}
-        showWeekNumbers={showWeekNumbers}
+        withWeekNumbers={withWeekNumbers}
         {...stylesApiProps}
       />
     </Box>
diff --git a/packages/@mantine/dates/src/components/MonthLevelGroup/MonthLevelGroup.tsx b/packages/@mantine/dates/src/components/MonthLevelGroup/MonthLevelGroup.tsx
index 00249cf3b39..fd39d2372b6 100644
--- a/packages/@mantine/dates/src/components/MonthLevelGroup/MonthLevelGroup.tsx
+++ b/packages/@mantine/dates/src/components/MonthLevelGroup/MonthLevelGroup.tsx
@@ -60,7 +60,7 @@ export const MonthLevelGroup = factory<MonthLevelGroupFactory>((_props, ref) =>
     __onDayMouseEnter,
     withCellSpacing,
     highlightToday,
-    showWeekNumbers,
+    withWeekNumbers,
 
     // CalendarHeader settings
     __preventFocus,
@@ -163,7 +163,7 @@ export const MonthLevelGroup = factory<MonthLevelGroupFactory>((_props, ref) =>
           static={isStatic}
           withCellSpacing={withCellSpacing}
           highlightToday={highlightToday}
-          showWeekNumbers={showWeekNumbers}
+          withWeekNumbers={withWeekNumbers}
         />
       );
     });
diff --git a/packages/@mantine/dates/src/components/WeekdaysRow/WeekdaysRow.tsx b/packages/@mantine/dates/src/components/WeekdaysRow/WeekdaysRow.tsx
index c685f8f6134..0d89471f25a 100644
--- a/packages/@mantine/dates/src/components/WeekdaysRow/WeekdaysRow.tsx
+++ b/packages/@mantine/dates/src/components/WeekdaysRow/WeekdaysRow.tsx
@@ -44,7 +44,7 @@ export interface WeekdaysRowProps
   cellComponent?: 'td' | 'th';
 
   /** Determines whether week numbers should be displayed */
-  showWeekNumbers?: boolean;
+  withWeekNumbers?: boolean;
 }
 
 export type WeekdaysRowFactory = Factory<{
@@ -77,7 +77,7 @@ export const WeekdaysRow = factory<WeekdaysRowFactory>((_props, ref) => {
     weekdayFormat,
     cellComponent: CellComponent = 'th',
     __staticSelector,
-    showWeekNumbers,
+    withWeekNumbers,
     ...others
   } = props;
 
@@ -109,7 +109,7 @@ export const WeekdaysRow = factory<WeekdaysRowFactory>((_props, ref) => {
 
   return (
     <Box component="tr" ref={ref} {...getStyles('weekdaysRow')} {...others}>
-      {showWeekNumbers && <CellComponent {...getStyles('weekday')}>#</CellComponent>}
+      {withWeekNumbers && <CellComponent {...getStyles('weekday')}>#</CellComponent>}
       {weekdays}
     </Box>
   );