Calendar
A month grid for picking a date or a range.
When to use
- Pick a date or a range when seeing the month helps: booking a visit, choosing a reporting period.
- Show a calendar inline on a page whose main task is picking a date.
When not to use
- A date field in a form: use Date Picker, which opens the calendar from a button.
- A date far from today, such as a date of birth: use Input, so users type it instead of paging through years.
Install
npx shadcn@latest add @clinia/calendarAnatomy
- 1Calendar
data-slot="calendar"border-border · rounded-lg - 2Month
.rdp-caption_labeltext-sm · font-medium - 3Previous and next
.rdp-button_previousghost · icon - 4Weekday
.rdp-weekday:nth-child(6)text-xs · text-muted-foreground - 5Today
.rdp-todayring-1 · ring-accent - 6Selected day
[data-selected-single=true]bg-primary · text-primary-foreground - 7Day of another month
.rdp-week:last-child .rdp-outsidetext-muted-foreground
Clinia rules
- Today has a Trust ring. The selected day, and each end of a range, is a
primaryfill withprimary-foregroundtext. Days inside a range are tintedbg-accent/15. - Disable the days users can't pick (
disabled) instead of rejecting them after the click. - Show two months (
numberOfMonths={2}) for a range that can cross a month end.
Do and don't
For example, 1984-03-12.
Date of birth
States
selected · today · other months
range
disabled days
Toggle the site theme to review both themes.
Accessibility
Built in
- Today carries a Trust ring, at least 3:1 in both themes. The selected day is a primary fill, and a range's middle days are tinted
bg-accent/15. - react-day-picker renders a
gridwith one focusable day: arrow keys move by day and week, Page Up and Page Down by month, Home and End to the start and end of the week.
Your responsibility
- Say what the date is for in a label or heading next to the calendar: the grid only knows months and days.
- Pass
localefor French, so month names, weekday names and the first day of the week follow the reader's language.
How to test
- Press Tab into the grid: the selected day, or today, gets focus.
- Press the arrow keys: focus moves by day and by week, and crosses into the next month. Page Down moves a month.
- Press Enter or Space: the focused day is selected.
- With a screen reader, each day is announced with its full date, and whether it's selected or today.
API
| Prop | Values | Default | Description |
|---|---|---|---|
| buttonVariant | defaultoutlinesecondaryghostdestructivelink | ghost | Button variant for the previous and next month controls. |
All other props come from React DayPicker.
Related