{"@context":"https://schema.org","@graph":[{"@type":"TechArticle","headline":"Calendar","description":"Select a date from a calendar with month and year navigation.","url":"https://intentui.com/docs/components/date-and-time/calendar","author":{"@type":"Person","name":"Irsyad","url":"https://x.com/irsyad"},"publisher":{"@type":"Organization","name":"Intent UI","url":"https://intentui.com","logo":{"@type":"ImageObject","url":"https://intentui.com/icon.svg"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://intentui.com/docs/components/date-and-time/calendar"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://intentui.com"},{"@type":"ListItem","position":2,"name":"Docs","item":"https://intentui.com/docs"},{"@type":"ListItem","position":3,"name":"Components","item":"https://intentui.com/docs/components"},{"@type":"ListItem","position":4,"name":"Date and time","item":"https://intentui.com/docs/components/date-and-time"},{"@type":"ListItem","position":5,"name":"Calendar","item":"https://intentui.com/docs/components/date-and-time/calendar"}]}]}
Calendar
Loading...
Installation
Add the component with the CLI.
npm
pnpm
yarn
bun
npx shadcn@latest add @intentui/calendar
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
Manual installation
Install the dependencies, then copy the component source into your project.
npm
pnpm
yarn
bun
npm install react-aria-components @heroicons/react cn
Examples
Check out the calendar in action in the Date Picker and Date Range Picker documentation.
Component API
Calendar
Calendar extends the React Aria Components <Calendar> component.
classNamestringCalendarHeader
CalendarHeader extends the native <header> element.
classNamestringCalendarGridHeader
CalendarGridHeader extends the React Aria Components <CalendarGridHeader> component.
SelectMonth
SelectMonth extends the React Aria Components <CalendarMonthPicker> component.
SelectYear
SelectYear extends the React Aria Components <CalendarYearPicker> component.
See the React Aria for the full API reference.