[@mantine/dates] feat: add withWeekday and weekdayFormat props to MiniCalendar#8572
Conversation
There was a problem hiding this comment.
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' */ |
There was a problem hiding this comment.
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.
@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 <175728472+Copilot@users.noreply.github.com>
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