║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Calendar description: A date field component that allows users to enter and edit date. links: docs: https://ui.shadcn.com/docs/components/calendar

<ComponentPreview name="calendar-demo" />

Installation

<CodeBlockCommand component="calendar" />

Examples

Range Calendar

<ComponentPreview name="calendar-range" />

Month and Year Selector

<ComponentPreview name="calendar-month-year-selector" constrainHeight={false} />

Date of Birth Picker

<ComponentPreview name="calendar-date-of-birth-picker" />

Date and Time Picker

<ComponentPreview name="calendar-date-and-time-picker" />

Migrating from Radix UI

<Steps> <Step> <include>migration-steps/common.mdx</include> </Step> </Steps>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║