Data Display
Calendar
A square-cornered month grid with single, multiple, and range selection.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Selected Oct 24, 2026
Installation
Copy the source with the CLI to own and edit it, or import it from the npm package.
npx aback-ui@latest add calendarWrites components/ui/calendar.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.
Usage
Import the parts you need from the installed file. The Code tab above has a complete, working example.
import { Calendar } from "@/components/ui/calendar";API reference
Props and composition points for Calendar. Native element props pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
mode | "single" | "multiple" | "range" | "single" | Selection mode. It also determines the shape of selected and the argument passed to onSelect. |
selected / onSelect | Date | Date[] | DateRange | undefined / (value) => void | None | Controlled selection. In range mode the value is { from, to } and either end may be missing while the visitor is choosing. |
defaultMonth / month / onMonthChange | Date / Date / (month: Date) => void | None | The visible month. Use defaultMonth for an initial month and month for full control, such as a month picker. |
disabled | Matcher | Matcher[] | None | Dates that cannot be selected, for example { before: min } or { dayOfWeek: [0, 6] }. Disabled days remain announced but are not focusable targets for selection. |
numberOfMonths | number | 1 | Months rendered side by side. Two months suit range selection on wide screens; check the narrow layout before using more than two. |
captionLayout | "label" | "dropdown" | "dropdown-months" | "dropdown-years" | "label" | Adds month or year dropdowns for jumping across a long range. Keep startMonth and endMonth set so the options stay bounded. |
showOutsideDays | boolean | true | Shows the adjacent month's days in the leading and trailing cells. They are styled muted and remain selectable unless disabled. |
autoFocus | boolean | false | Moves focus into the grid when the calendar mounts. DatePicker sets this when its popover opens. |
classNames / className | Partial<ClassNames> / string | None | Adjust one slot or add layout around the calendar. Omitted slots keep the Aback token styling. |
Dependencies: @tabler/icons-react, react-day-picker, plus the shared @/lib/utils helper.
Accessibility
Semantics, keyboard behavior, and the decisions that keep the component operable.
- Days are buttons in a labelled grid, not a pile of divs. The grid announces the month, and each day announces its full date and selected state.
- Keyboard navigation follows the ARIA grid pattern: arrows move by day or week, Home and End move within the week, Page Up and Page Down change month, and Shift with Page Up or Page Down changes year.
- Disabled dates keep their place in the grid so the month structure does not jump, but they cannot be selected.
- The month caption is a polite live region, so a keyboard month change is announced without interrupting the user.
- The calendar is a non-modal surface. Do not trap focus in it; inside a dialog, let the dialog own Escape and focus return.
Keyboard
| Key | Action |
|---|---|
| Arrow keys | Move focus by one day or one week. |
| HomeorEnd | Move to the first or last day of the focused week. |
| Page UporPage Down | Move to the previous or next month. |
| Shift+Page UporPage Down | Move to the previous or next year. |
| EnterorSpace | Select the focused day. |
Dates are local calendar days. If the value must represent an instant across time zones, store an ISO timestamp and convert deliberately rather than passing a UTC midnight into the grid.
Used in production
The Aback products whose interfaces shaped this component.
This component is new in Aback UI. It has not shipped in an Aback product yet, so no production use is claimed.