Date Calendar

Put a month right on the page for picking a delivery day, a deadline, or a run of nights.

Installation

You can add the date calendar using our CLI or manually:

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

CLI

Manual

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add date-calendar

Using a shared UI package or custom import aliases? Configure your installation paths before running the CLI. Copy-paste examples use the default imports.

Ranges

DateRangeCalendar picks a start and an end, two months side by side that stack when space runs out. Set visibleMonths={1} for a single month.

import { DateRangeCalendar } from "@/components/base/date-picker/date-calendar";
const [range, setRange] = useState({ start: nextWeek, end: nextWeek.add({ days: 4 }) });
<DateRangeCalendar aria-label="Stay" value={range} onChange={setRange} minValue={today(getLocalTimeZone())} />

Limits and unavailable days

Days outside minValue and maxValue fade and can't be picked. Days that isDateUnavailable rules out stay in the grid, struck through, so the rhythm of the month reads at a glance.

import { getLocalTimeZone, isWeekend, today } from "@internationalized/date";import { useLocale } from "react-aria-components";
const { locale } = useLocale();const now = today(getLocalTimeZone());
<DateCalendar  aria-label="Appointment date"  minValue={now}  maxValue={now.add({ weeks: 6 })}  isDateUnavailable={(date) => isWeekend(date, locale)}/>

Right-to-left

Inside DirectionProvider, the month and weekday names follow the locale, the week starts where the locale starts it, and the arrows turn.

import { DirectionProvider } from "@/components/foundations/direction/direction";
<DirectionProvider locale="ar">  <DateCalendar aria-label="تاريخ التسليم" /></DirectionProvider>

Keyboard and accessibility

Arrow keys move by day, Page Up and Page Down by month, and with Shift by year. Home and End jump to the first and last day of the month, and Enter or Space picks the focused day. Screen readers hear the month as it changes and each day with its full date.

Today on the server is not always today in the browser. On a statically rendered page, render the calendar after mount, as this page does, so the month and the dot under today match the reader's clock.