From 5f248d6b27bbf01cc1fe9eca83d5b40916c1bf25 Mon Sep 17 00:00:00 2001 From: Ishmamur Rahman Date: Mon, 29 Dec 2025 03:51:26 +0600 Subject: [PATCH 1/2] [@mantine/dates] feat: add with weekday and weekdayFormat props to MiniCalendar --- .../src/pages/dates/mini-calendar.mdx | 12 ++++++++ .../MiniCalendar.demo.weekdayFormat.tsx | 25 +++++++++++++++++ .../MiniCalendar.demo.withWeekday.tsx | 25 +++++++++++++++++ .../MiniCalendar/MiniCalendar.demos.story.tsx | 10 +++++++ .../src/demos/dates/MiniCalendar/index.ts | 2 ++ .../src/data/MiniCalendar.styles-api.ts | 1 + .../MiniCalendar/MiniCalendar.module.css | 6 ++++ .../MiniCalendar/MiniCalendar.story.tsx | 16 +++++++++++ .../MiniCalendar/MiniCalendar.test.tsx | 28 ++++++++++++++++++- .../components/MiniCalendar/MiniCalendar.tsx | 14 ++++++++++ 10 files changed, 138 insertions(+), 1 deletion(-) create mode 100644 packages/@docs/demos/src/demos/dates/MiniCalendar/MiniCalendar.demo.weekdayFormat.tsx create mode 100644 packages/@docs/demos/src/demos/dates/MiniCalendar/MiniCalendar.demo.withWeekday.tsx diff --git a/apps/mantine.dev/src/pages/dates/mini-calendar.mdx b/apps/mantine.dev/src/pages/dates/mini-calendar.mdx index a9c841ca73c..405e564ea8f 100644 --- a/apps/mantine.dev/src/pages/dates/mini-calendar.mdx +++ b/apps/mantine.dev/src/pages/dates/mini-calendar.mdx @@ -15,6 +15,18 @@ The default value is `7`. +## withWeekday + +Use `withWeekDay` prop to display weekday label (Mon, Tue). The default value is `false`. + + + +## weekdayFormat + +Use `weekdayFormat` prop to change [dayjs format](https://day.js.org/docs/en/display/format) of week day label. The default value is `ddd`. + + + ## getDayProps Use `getDayProps` to add custom props to days, for example, assign styles to weekends: diff --git a/packages/@docs/demos/src/demos/dates/MiniCalendar/MiniCalendar.demo.weekdayFormat.tsx b/packages/@docs/demos/src/demos/dates/MiniCalendar/MiniCalendar.demo.weekdayFormat.tsx new file mode 100644 index 00000000000..3b91d1ae65d --- /dev/null +++ b/packages/@docs/demos/src/demos/dates/MiniCalendar/MiniCalendar.demo.weekdayFormat.tsx @@ -0,0 +1,25 @@ +import { useState } from 'react'; +import { MiniCalendar } from '@mantine/dates'; +import { MantineDemo } from '@mantinex/demo'; + +const code = ` +import { useState } from 'react'; +import { MiniCalendar } from '@mantine/dates'; + +function Demo() { + const [value, onChange] = useState('2025-12-29'); + return ; +} +`; + +function Demo() { + const [value, onChange] = useState('2025-12-29'); + return ; +} + +export const weekdayFormat: MantineDemo = { + type: 'code', + component: Demo, + code, + centered: true, +}; diff --git a/packages/@docs/demos/src/demos/dates/MiniCalendar/MiniCalendar.demo.withWeekday.tsx b/packages/@docs/demos/src/demos/dates/MiniCalendar/MiniCalendar.demo.withWeekday.tsx new file mode 100644 index 00000000000..5952b50364e --- /dev/null +++ b/packages/@docs/demos/src/demos/dates/MiniCalendar/MiniCalendar.demo.withWeekday.tsx @@ -0,0 +1,25 @@ +import { useState } from 'react'; +import { MiniCalendar } from '@mantine/dates'; +import { MantineDemo } from '@mantinex/demo'; + +const code = ` +import { useState } from 'react'; +import { MiniCalendar } from '@mantine/dates'; + +function Demo() { + const [value, onChange] = useState('2025-12-29'); + return ; +} +`; + +function Demo() { + const [value, onChange] = useState('2025-12-29'); + return ; +} + +export const withWeekday: MantineDemo = { + type: 'code', + component: Demo, + code, + centered: true, +}; diff --git a/packages/@docs/demos/src/demos/dates/MiniCalendar/MiniCalendar.demos.story.tsx b/packages/@docs/demos/src/demos/dates/MiniCalendar/MiniCalendar.demos.story.tsx index 55231a96dc1..76706c96313 100644 --- a/packages/@docs/demos/src/demos/dates/MiniCalendar/MiniCalendar.demos.story.tsx +++ b/packages/@docs/demos/src/demos/dates/MiniCalendar/MiniCalendar.demos.story.tsx @@ -27,3 +27,13 @@ export const Demo_minMax = { name: '⭐ Demo: minMax', render: renderDemo(demos.minMax), }; + +export const Demo_withWeekday = { + name: '⭐ Demo: withWeekday', + render: renderDemo(demos.withWeekday), +}; + +export const Demo_weekdayFormat = { + name: '⭐ Demo: weekdayFormat', + render: renderDemo(demos.weekdayFormat), +}; diff --git a/packages/@docs/demos/src/demos/dates/MiniCalendar/index.ts b/packages/@docs/demos/src/demos/dates/MiniCalendar/index.ts index 55b4bc1a30a..4ba4480d376 100644 --- a/packages/@docs/demos/src/demos/dates/MiniCalendar/index.ts +++ b/packages/@docs/demos/src/demos/dates/MiniCalendar/index.ts @@ -3,3 +3,5 @@ export { locale } from './MiniCalendar.demo.locale'; export { numberOfDays } from './MiniCalendar.demo.numberOfDays'; export { getDayProps } from './MiniCalendar.demo.getDayProps'; export { minMax } from './MiniCalendar.demo.minMax'; +export { withWeekday } from './MiniCalendar.demo.withWeekday'; +export { weekdayFormat } from './MiniCalendar.demo.weekdayFormat'; diff --git a/packages/@docs/styles-api/src/data/MiniCalendar.styles-api.ts b/packages/@docs/styles-api/src/data/MiniCalendar.styles-api.ts index f0978b4ccac..b0bd65ad0b4 100644 --- a/packages/@docs/styles-api/src/data/MiniCalendar.styles-api.ts +++ b/packages/@docs/styles-api/src/data/MiniCalendar.styles-api.ts @@ -7,6 +7,7 @@ export const MiniCalendarStylesApi: StylesApiData = { control: 'Button in the dropdown which is used to select hours/minutes/seconds/am-pm', days: 'Days container', day: 'Single day element', + dayWeekday: 'Weekday label (e.g., Mon, Tue)', dayMonth: 'Day element in month view', dayNumber: 'Day number element', }, diff --git a/packages/@mantine/dates/src/components/MiniCalendar/MiniCalendar.module.css b/packages/@mantine/dates/src/components/MiniCalendar/MiniCalendar.module.css index cbac11c260d..2e406b7452c 100644 --- a/packages/@mantine/dates/src/components/MiniCalendar/MiniCalendar.module.css +++ b/packages/@mantine/dates/src/components/MiniCalendar/MiniCalendar.module.css @@ -60,6 +60,12 @@ opacity: 0.65; } +.dayWeekday { + font-size: 0.7em; + font-weight: 400; + opacity: 0.5; +} + .dayNumber { font-size: 0.9em; font-weight: 500; diff --git a/packages/@mantine/dates/src/components/MiniCalendar/MiniCalendar.story.tsx b/packages/@mantine/dates/src/components/MiniCalendar/MiniCalendar.story.tsx index a5b7446f00a..8b2b6e49ddb 100644 --- a/packages/@mantine/dates/src/components/MiniCalendar/MiniCalendar.story.tsx +++ b/packages/@mantine/dates/src/components/MiniCalendar/MiniCalendar.story.tsx @@ -27,3 +27,19 @@ export function DisabledDay() { ); } + +export function WithDayOfWeek() { + return ( +
+ +
+ ); +} + +export function WithFullDayName() { + return ( +
+ +
+ ); +} diff --git a/packages/@mantine/dates/src/components/MiniCalendar/MiniCalendar.test.tsx b/packages/@mantine/dates/src/components/MiniCalendar/MiniCalendar.test.tsx index ec7e20a0b35..a8faa0e9b1b 100644 --- a/packages/@mantine/dates/src/components/MiniCalendar/MiniCalendar.test.tsx +++ b/packages/@mantine/dates/src/components/MiniCalendar/MiniCalendar.test.tsx @@ -4,6 +4,7 @@ import { MiniCalendar, MiniCalendarProps, MiniCalendarStylesNames } from './Mini const defaultProps: MiniCalendarProps = { nextControlProps: { 'aria-label': 'next' }, previousControlProps: { 'aria-label': 'previous' }, + withWeekday: true, }; describe('@mantine/dates/MiniCalendar', () => { @@ -19,7 +20,7 @@ describe('@mantine/dates/MiniCalendar', () => { classes: true, refType: HTMLDivElement, displayName: '@mantine/dates/MiniCalendar', - stylesApiSelectors: ['root', 'control', 'days', 'day', 'dayMonth', 'dayNumber'], + stylesApiSelectors: ['root', 'control', 'days', 'day', 'dayWeekday', 'dayMonth', 'dayNumber'], }); it('displays given date range', () => { @@ -146,4 +147,29 @@ describe('@mantine/dates/MiniCalendar', () => { expect(container.querySelector('[data-test-previous]')).toBeInTheDocument(); expect(container.querySelector('[data-test-next]')).toBeInTheDocument(); }); + + it('supports withWeekday', () => { + const { rerender } = render( + + ); + + expect(screen.queryByText('Wed')).not.toBeInTheDocument(); + + rerender(); + expect(screen.getByText('Wed')).toBeInTheDocument(); + }); + + it('supports weekdayFormat', () => { + render( + + ); + + expect(screen.getByText('Wednesday')).toBeInTheDocument(); + }); }); diff --git a/packages/@mantine/dates/src/components/MiniCalendar/MiniCalendar.tsx b/packages/@mantine/dates/src/components/MiniCalendar/MiniCalendar.tsx index e82ea4a0b72..060eb50daa6 100644 --- a/packages/@mantine/dates/src/components/MiniCalendar/MiniCalendar.tsx +++ b/packages/@mantine/dates/src/components/MiniCalendar/MiniCalendar.tsx @@ -25,6 +25,7 @@ export type MiniCalendarStylesNames = | 'control' | 'days' | 'day' + | 'dayWeekday' | 'dayMonth' | 'dayNumber'; @@ -63,6 +64,12 @@ export interface MiniCalendarProps /** Dayjs format string for month label @default `MMM` */ monthLabelFormat?: string; + /** Display day of week in date cells @default false */ + withWeekday?: boolean; + + /** dayjs format string for weekday label @default 'ddd' */ + weekdayFormat?: string; + /** Called when the next button is clicked */ onNext?: () => void; @@ -96,6 +103,8 @@ const defaultProps = { size: 'sm', numberOfDays: 7, monthLabelFormat: 'MMM', + withWeekday: false, + weekdayFormat: 'ddd', } satisfies Partial; const varsResolver = createVarsResolver((_theme, { size }) => ({ @@ -126,6 +135,8 @@ export const MiniCalendar = factory((_props, ref) => { minDate, maxDate, monthLabelFormat, + withWeekday, + weekdayFormat, nextControlProps, previousControlProps, locale, @@ -204,6 +215,9 @@ export const MiniCalendar = factory((_props, ref) => { style: dayProps?.style, })} > + {withWeekday && ( + {date.locale(_locale).format(weekdayFormat)} + )} {date.locale(_locale).format(monthLabelFormat)} {date.date()} From 707f1016d8e1968f5d691f14b49d95a09d9d686c Mon Sep 17 00:00:00 2001 From: Vitaly Rtishchev Date: Thu, 1 Jan 2026 17:30:03 +0300 Subject: [PATCH 2/2] Update apps/mantine.dev/src/pages/dates/mini-calendar.mdx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- apps/mantine.dev/src/pages/dates/mini-calendar.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/mantine.dev/src/pages/dates/mini-calendar.mdx b/apps/mantine.dev/src/pages/dates/mini-calendar.mdx index 405e564ea8f..3cda68eb590 100644 --- a/apps/mantine.dev/src/pages/dates/mini-calendar.mdx +++ b/apps/mantine.dev/src/pages/dates/mini-calendar.mdx @@ -17,7 +17,7 @@ The default value is `7`. ## withWeekday -Use `withWeekDay` prop to display weekday label (Mon, Tue). The default value is `false`. +Use `withWeekday` prop to display weekday label (Mon, Tue). The default value is `false`.