Docs
Calendar
Calendar
A date field component that allows users to enter and edit date.
About
The Calendar
component is built on top of React DayPicker.
Installation
pnpm dlx shadcn@latest add calendar
Usage
import { Calendar } from "@/components/ui/calendar"
const [date, setDate] = React.useState<Date | undefined>(new Date())
return (
<Calendar
mode="single"
selected={date}
onSelect={setDate}
className="rounded-md border"
/>
)
See the React DayPicker documentation for more information.
Date Picker
You can use the <Calendar>
component to build a date picker. See the Date Picker page for more information.
Examples
Form
Changelog
11-03-2024 day_outside color
-
Changed the color of the
day_outside
class to the following to improve contrast:calendar.tsx"day_outside: "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",