[@mantine/dates] feat: add withWeekday and weekdayFormat props to MiniCalendar

apps/mantine.dev/src/pages/dates/mini-calendar.mdx

@@ -15,6 +15,18 @@ The default value is `7`.
 
 <Demo data={MiniCalendarDemos.numberOfDays} />
 
+## withWeekday
+
+Use `withWeekday` prop to display weekday label (Mon, Tue). The default value is `false`.
+
+<Demo data={MiniCalendarDemos.withWeekday} />
+
+## 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`. 
+
+<Demo data={MiniCalendarDemos.weekdayFormat} />
+
 ## getDayProps
 
 Use `getDayProps` to add custom props to days, for example, assign styles to weekends:

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<string | null>('2025-12-29');
+  return <MiniCalendar value={value} onChange={onChange} withWeekday weekdayFormat="dddd" />;
+}
+`;
+
+function Demo() {
+  const [value, onChange] = useState<string | null>('2025-12-29');
+  return <MiniCalendar value={value} onChange={onChange} withWeekday weekdayFormat="dddd" />;
+}
+
+export const weekdayFormat: MantineDemo = {
+  type: 'code',
+  component: Demo,
+  code,
+  centered: true,
+};

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<string | null>('2025-12-29');
+  return <MiniCalendar value={value} onChange={onChange} withWeekday />;
+}
+`;
+
+function Demo() {
+  const [value, onChange] = useState<string | null>('2025-12-29');
+  return <MiniCalendar value={value} onChange={onChange} withWeekday />;
+}
+
+export const withWeekday: MantineDemo = {
+  type: 'code',
+  component: Demo,
+  code,
+  centered: true,
+};

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

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';

packages/@docs/styles-api/src/data/MiniCalendar.styles-api.ts

@@ -7,6 +7,7 @@ export const MiniCalendarStylesApi: StylesApiData<MiniCalendarFactory> = {
     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',
   },

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;

packages/@mantine/dates/src/components/MiniCalendar/MiniCalendar.story.tsx

@@ -27,3 +27,19 @@ export function DisabledDay() {
     </div>
   );
 }
+
+export function WithDayOfWeek() {
+  return (
+    <div style={{ padding: 40 }}>
+      <MiniCalendar size="xl" withWeekday />
+    </div>
+  );
+}
+
+export function WithFullDayName() {
+  return (
+    <div style={{ padding: 40 }}>
+      <MiniCalendar size="xl" withWeekday weekdayFormat="dddd" />
+    </div>
+  );
+}

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(
+      <MiniCalendar {...defaultProps} date="2025-01-01" numberOfDays={1} withWeekday={false} />
+    );
+
+    expect(screen.queryByText('Wed')).not.toBeInTheDocument();
+
+    rerender(<MiniCalendar {...defaultProps} date="2025-01-01" numberOfDays={1} withWeekday />);
+    expect(screen.getByText('Wed')).toBeInTheDocument();
+  });
+
+  it('supports weekdayFormat', () => {
+    render(
+      <MiniCalendar
+        {...defaultProps}
+        date="2025-01-01"
+        numberOfDays={1}
+        withWeekday
+        weekdayFormat="dddd"
+      />
+    );
+
+    expect(screen.getByText('Wednesday')).toBeInTheDocument();
+  });
 });

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<MiniCalendarProps>;
 
 const varsResolver = createVarsResolver<MiniCalendarFactory>((_theme, { size }) => ({
@@ -126,6 +135,8 @@ export const MiniCalendar = factory<MiniCalendarFactory>((_props, ref) => {
     minDate,
     maxDate,
     monthLabelFormat,
+    withWeekday,
+    weekdayFormat,
     nextControlProps,
     previousControlProps,
     locale,
@@ -204,6 +215,9 @@ export const MiniCalendar = factory<MiniCalendarFactory>((_props, ref) => {
             style: dayProps?.style,
           })}
         >
+          {withWeekday && (
+            <span {...getStyles('dayWeekday')}>{date.locale(_locale).format(weekdayFormat)}</span>
+          )}
           <span {...getStyles('dayMonth')}>{date.locale(_locale).format(monthLabelFormat)}</span>
           <span {...getStyles('dayNumber')}>{date.date()}</span>
         </UnstyledButton>