Components

Calendar

Standalone month calendar built on react-day-picker. Use it inline for scheduling views, or wrap it in a Popover for a compact Date picker.

When to usewhen the operator needs to see multiple days at once — scheduling, range selection, availability.

Import

import { Calendar } from "@ravnhq/efni/calendar"

const [date, setDate] = useState<Date | undefined>(new Date())

<Calendar mode="single" selected={date} onSelect={setDate} />

const [range, setRange] = useState<DateRange | undefined>()

<Calendar mode="range" selected={range} onSelect={setRange} numberOfMonths={2} />

Key	Action
`Arrows`	Move focus between days.
`PageUp / PageDown`	Previous / next month (Shift adds a year).
`Home / End`	Jump to start or end of the week.
`Enter / Space`	Select the focused day.

react-day-picker renders as a native table with role="grid" and matching cell semantics.
Give the calendar an aria-label when it isn't paired with a visible heading.

Don't

Don't hide the current month indicator — operators lose orientation.
Don't use a calendar when the field only expects a known date format — an Input is faster to type.
Don't animate the month change; it slows down repeat scrubbing.

Prop	Type	Default	Description
`mode`	`"single" \| "multiple" \| "range"`	—	Enable the selection of a single day, multiple days, or a range of days.
`numberOfMonths`	`number`	—	The number of displayed months.
`buttonVariant`	`React.ComponentProps<typeof Button>["variant"]`	`"ghost"`	Button variant used for the day cells and the month navigation.
`…props`	`React.ComponentProps<typeof DayPicker>`	—	Everything Calendar passes to the element it renders.
`selected`	`Date \| Date[] \| DateRange \| undefined`	—	Currently selected value(s). Shape matches mode.
`onSelect`	`(value) => void`	—	Fires whenever the selection changes.