## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @dotui/calendar ``` ```bash pnpm dlx shadcn@latest add @dotui/calendar ``` ```bash yarn dlx shadcn@latest add @dotui/calendar ``` ```bash bun x shadcn@latest add @dotui/calendar ``` ## Usage [#usage] Use `Calendar` to allow users to select a single date value. ```tsx import { Calendar } from '@/components/ui/calendar' ``` ```tsx ``` Use `RangeCalendar` to let users select a contiguous range of dates. ```tsx import { RangeCalendar } from '@/components/ui/calendar' ``` ```tsx ``` ## Composition [#composition] For full control, compose the calendar from its parts. ```tsx import { CalendarHeader, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, } from '@/components/ui/calendar' ``` ```tsx {day => } {date => } ``` ## Value [#value] Calendar values use [`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/) objects. Pass `defaultValue` for uncontrolled state, or `value` with `onChange` to control it. ```tsx import { parseDate } from '@internationalized/date' ; ``` ```tsx import { useState } from 'react' import { parseDate } from '@internationalized/date' import type { DateValue } from 'react-aria-components' const [value, setValue] = useState(parseDate('2020-02-03')) ; ``` ## Examples [#examples] ## API Reference [#api-reference] ### Calendar [#calendar] ### RangeCalendar [#rangecalendar] ### CalendarHeader [#calendarheader] ### CalendarGrid [#calendargrid] ### CalendarGridHeader [#calendargridheader] ### CalendarHeaderCell [#calendarheadercell] ### CalendarGridBody [#calendargridbody] ### CalendarCell [#calendarcell]