Calendar

Forms

A 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";

Select a date from the calendar

Restrict selection to a specific date range

Selection limited to 7 days ago through 30 days from today

Disable specific dates based on a condition

Weekends are disabled

Compact calendar for smaller spaces

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