-
-
Notifications
You must be signed in to change notification settings - Fork 2.2k
[@mantine/dates] feat: add withWeekday and weekdayFormat props to MiniCalendar #8572
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR adds two new props to the MiniCalendar component to display weekday labels alongside the existing date information. The withWeekday prop enables weekday display, while weekdayFormat allows customization of the dayjs format string.
Key Changes:
- Added
withWeekdayboolean prop (default:false) to enable weekday label display - Added
weekdayFormatstring prop (default:'ddd') to customize weekday format - Implemented corresponding tests, documentation, and demo examples
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
packages/@mantine/dates/src/components/MiniCalendar/MiniCalendar.tsx |
Added new props, updated types, and implemented weekday rendering logic |
packages/@mantine/dates/src/components/MiniCalendar/MiniCalendar.test.tsx |
Added test coverage for both new props and updated styles API selectors |
packages/@mantine/dates/src/components/MiniCalendar/MiniCalendar.story.tsx |
Added story examples demonstrating the new functionality |
packages/@mantine/dates/src/components/MiniCalendar/MiniCalendar.module.css |
Added CSS styling for the weekday label |
packages/@docs/styles-api/src/data/MiniCalendar.styles-api.ts |
Updated styles API documentation with new dayWeekday selector |
packages/@docs/demos/src/demos/dates/MiniCalendar/index.ts |
Exported new demo components |
packages/@docs/demos/src/demos/dates/MiniCalendar/MiniCalendar.demos.story.tsx |
Added demo stories for both props |
packages/@docs/demos/src/demos/dates/MiniCalendar/MiniCalendar.demo.withWeekday.tsx |
Created demo showcasing the withWeekday prop |
packages/@docs/demos/src/demos/dates/MiniCalendar/MiniCalendar.demo.weekdayFormat.tsx |
Created demo showcasing the weekdayFormat prop |
apps/mantine.dev/src/pages/dates/mini-calendar.mdx |
Added documentation sections for both new props |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| /** Display day of week in date cells @default false */ | ||
| withWeekday?: boolean; | ||
|
|
||
| /** dayjs format string for weekday label @default 'ddd' */ |
Copilot
AI
Jan 1, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Inconsistent capitalization of 'dayjs' in JSDoc comments. Line 64 uses 'Dayjs' (capitalized) for monthLabelFormat, while line 70 uses 'dayjs' (lowercase) for weekdayFormat. These should be consistent. Since the library is officially named 'Day.js' but imported as 'dayjs', using lowercase 'dayjs' would be more consistent with the actual code.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@rtivital Copilot suggests to update Dayjs to dayjs in the JSDoc comment for monthLabelFormat L:63 in MiniCalendar.tsx.
Since this is unrelated to the PR scope, is it necessary to address this now, or can we add this as part of a general documentation cleanup?
Co-authored-by: Copilot <[email protected]>
Adds 1st feature from Feature Request #8346
Purpose
withWeekdayprop toMiniCalendarto display day of the week (Mon/Tue)weekdayFormatprop toMiniCalendarto specify dayjs format for the labelChanges
MiniCalendar.tsxScreenshots