Calendar
A calendar is a month grid for picking one day or a range. It works on its own on a page, and it's the grid inside Date picker and Date range picker. In range mode the range is drawn as one bar per week, and while the second day is chosen it previews under the pointer or the keyboard. It has the whole keyboard model of a date grid, bounds and rules for the days that can't be picked, a week that starts on Sunday or Monday, and names in any locale.
Examples
Range
Two months side by side. The first pick sets the start, and the bar follows the pointer until the second; picking an earlier day orders the range. Where there isn't room for two months side by side, they stack; the days never shrink below their size.
On a phone
type="scroll" stacks a year either side of the selection in one vertical
scroll, under a weekday header that stays put. Use it with size="lg",
which makes each day 44 pixels, in a drawer on a phone. Date picker's
drawer, which it opens below the sm breakpoint, is built this way.
Month view
type="month" is a full-page month of events: the month and its date span as
the title, Previous, Today and Next, and a grid of day cells that fills its
parent. Each cell shows its day and the first two events as cards, then a
count of the rest. Picking a day lists all its events, beside the grid from
1024 pixels wide and under it below that. It picks one day, with the same
value, onChange, month and bounds as the other types.
- Standup9:30 AM
- Launch prep1:00 – 3:00 PM
Month on a phone
The layout follows the calendar's own width, not the screen's. Below 768 pixels the cells shrink to the day and up to three dots, and the selected day's events fill the space under the grid.
- Design review10:00 AM
- Dentist4:30 PM
With actions
Children go at the end of the header, for actions such as search and a new event. The other types ignore children.
- Standup9:30 AM
- Launch prep1:00 – 3:00 PM
The month view fills its parent, so give the parent a height. It picks one
day: with mode="range" it draws the paged type and warns in the console.
Its English words (Today, +N more, No events, All day) come from labels.
Anatomy
Previous and next buttons over the months on screen, each a title and a grid of week rows. In range mode a bar sits behind each week the range crosses.
- Previous
- Next
- Grid
- Range bar
- Day
Guidelines
- 01Use Calendar on its own when the dates are the content, such as availability on a booking page. In a form, use Date picker so the field takes one line until it's needed.
- 02Show two months for a range that often crosses a month end, such as a stay or a report period. One is enough for a single day.
- 03Set bounds with
minDateandmaxDaterather than rejecting a pick after the fact. - 04Start the week where your readers do: Monday in most of Europe, Sunday in the US.
Best practices
Pick a day from October 5.
Accessibility
- 01Each month is a grid labelled by its title. Column headers carry the full weekday name, and each day button the full date, such as Tuesday, October 20, 2026.
- 02The grid is one tab stop. Arrows move by a day or a week, Home and End to the ends of the week, Page Up and Page Down by a month, and with Shift by a year. Moving past the page turns it.
- 03Enter or Space picks the focused day. The picked days' cells are aria-selected, and today is aria-current.
- 04Days that can't be picked are aria-disabled rather than disabled, so they stay in the keyboard path and are announced as unavailable.
- 05In range mode a polite live region says what happened: the start and that an end is needed, then the range and its length.
- 06The page slide fades in and is off under reduced motion.
Related components
- Date pickerA field that opens a calendar to pick a day, or a range with presets and Apply; a popover on desktop, a drawer on phones.
- FieldIn fibo's Storybook
- SheetIn fibo's Storybook
References
- WAI-ARIA date picker dialog example, for the grid's keyboard model and roles
Intl.DateTimeFormat, for names andformatRange