Calendar
A date field component that enables users to choose and edit a date.
Su
Mo
Tu
We
Th
Fr
Sa
Installation
npx shadcn@latest add https://scrollxui.dev/registry/calendar.json 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-lg border"
/>
);Examples
YearOrder
Su
Mo
Tu
We
Th
Fr
Sa
Disabled Days
June 2025
Su
Mo
Tu
We
Th
Fr
Sa
Single month with range selection
June 2025
Su
Mo
Tu
We
Th
Fr
Sa
Multiple month with range selection
June 2025
Su
Mo
Tu
We
Th
Fr
Sa
July 2025
Su
Mo
Tu
We
Th
Fr
Sa
Multiple months
September 2025
Su
Mo
Tu
We
Th
Fr
Sa
October 2025
Su
Mo
Tu
We
Th
Fr
Sa
Date Of Birth Picker
Month and Year Selector
Su
Mo
Tu
We
Th
Fr
Sa
Date & Time Picker
API Reference
Calendar
A date field component that enables users to choose and edit a date.