001
Calendar
DateSeptember 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Display only
Customize
Selection
Week
Min
Max
Disabled
Code
<Calendar />
Install
npx shadcn@latest add https://components.haedong.dev/r/calendar.json
Props
DateRange is { from: Date; to?: Date }. Until an end date is picked, only from is set.
| Prop | Type | Description |
|---|---|---|
| selectionMode | "none" | "single" | "range" | Selection behavior. Defaults to "none" (display only). |
| value / defaultValue | Date | DateRange | Selected value (controlled / uncontrolled). Its type follows selectionMode. |
| onChange | (value) => void | Called when the selection changes. |
| month / defaultMonth | Date | Month on display (controlled / uncontrolled). |
| onMonthChange | (month: Date) => void | Called on month navigation. Always receives a Date normalized to the 1st. |
| minDate / maxDate | Date | Selectable / navigable range. Compared by day, boundaries inclusive. |
| disabledDates | Date[] | Dates that cannot be selected. |
| weekStartsOn | 0 | 1 | First day of the week. 0 = Sunday (default), 1 = Monday. |
| className | string | Extra classes for the root element. |