Calendar

Month grid for picking a single date. Built on react-day-picker with Standard UI styling.

Examples

Single select

August 2026

Controlled

Selected: None

August 2026

Overview

Calendar renders a navigable month with selectable days. Defaults to single-date mode. Use controlled selected / onSelect when the chosen date drives other UI.

tsx

import { Calendar } from "@standard-ui/react"

<Calendar />

Usage

Controlled value

Lift selection into state when you need to show the date elsewhere or submit it with a form.

tsx

const [selected, setSelected] = useState<Date>()

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

Outside days

Outside days from adjacent months show by default. Pass showOutsideDays={false} for a tighter grid.

tsx

<Calendar showOutsideDays={false} />

API

Calendar accepts react-day-picker DayPicker props. Single mode is the default for this wrapper.

Prop	Type	Default	Description
mode	"single"	"single"	Selection mode for the day picker.
selected	Date \| undefined	—	Controlled selected date.
onSelect	(date: Date \| undefined) => void	—	Called when the user picks a day.
defaultMonth	Date	—	Initial month shown in the grid.
showOutsideDays	boolean	true	Show days from adjacent months.
disabled	Matcher \| Matcher[]	—	Disable specific dates or ranges.

Guidelines

Do

Pair with a text field or label that shows the chosen date
Disable past or unavailable dates when the domain requires it
Keep the calendar near the field that opens it

Don't

Don't rely on the grid alone without a readable selected value
Don't use a full calendar for relative presets only — offer Today / Tomorrow shortcuts when those dominate
Don't leave disabled ranges unexplained

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa