Calendar
FormsA calendar component for displaying and selecting dates. Supports month navigation, date selection, and min/max date constraints.
Import
import { Calendar, MiniCalendar } from "@/components/ui/calendar";Usage
Basic Calendar
Select a date from the calendar
January 2026
Su
Mo
Tu
We
Th
Fr
Sa
With Min/Max Dates
Restrict selection to a specific date range
January 2026
Su
Mo
Tu
We
Th
Fr
Sa
Selection limited to 7 days ago through 30 days from today
Disabled Weekends
Disable specific dates based on a condition
January 2026
Su
Mo
Tu
We
Th
Fr
Sa
Weekends are disabled
Mini Calendar
Compact calendar for smaller spaces
January 2026
Su
Mo
Tu
We
Th
Fr
Sa
API Reference
selectedundefinedDateThe currently selected date
onSelectundefined(date: Date) => voidCallback when a date is selected
defaultMonthnew Date()DateThe initial month to display
disabledundefined(date: Date) => booleanFunction to determine if a date should be disabled
minDateundefinedDateMinimum selectable date
maxDateundefinedDateMaximum selectable date
| Prop | Type | Default | Description |
|---|---|---|---|
selected | Date | undefined | The currently selected date |
onSelect | (date: Date) => void | undefined | Callback when a date is selected |
defaultMonth | Date | new Date() | The initial month to display |
disabled | (date: Date) => boolean | undefined | Function to determine if a date should be disabled |
minDate | Date | undefined | Minimum selectable date |
maxDate | Date | undefined | Maximum selectable date |