Component

Calendar

Full month calendar grid with date selection. Supports single date and range selection modes.

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add https://design.ag.org/r/calendar

Usage

Use the calendar component for date pickers and scheduling interfaces. Prefer the popover pattern for inline forms.

Composition

Select

Playground

Preview

SuMoTuWeThFrSa

Configure

Mode

Single date or date range selection

Code

const [selected, setSelected] = React.useState<Date | undefined>()

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

Variants & States

Supported variants, sizes, and interaction states for this component.

Modes

Single date
Date range

Do

Pre-select today's date when a current date is a sensible default
Highlight the selected range clearly in range mode

Don't

Don't use a full calendar for simple date-of-birth entry, use text inputs instead
Don't allow selection of disabled or unavailable dates without visual feedback