Default
March 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 | 1 | 2 | 3 | 4 |
Single Selection
March 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Selected: 3/28/2026
Range Selection
March 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
3/20/2026 - 3/27/2026
Disabled Weekends
March 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Props
| Prop | Type | Description |
|---|---|---|
| mode | 'single' | 'multiple' | 'range' | Selection mode for the calendar. |
| selected | Date | Date[] | DateRange | Currently selected date(s). |
| onSelect | (date) => void | Callback when selection changes. |
| showOutsideDays | boolean | Show days outside the current month. Default true. |
| disabled | Matcher | Matcher[] | Days that cannot be selected. |
| className | string | Additional classes for the root element. |
| classNames | Partial<ClassNames> | Override internal class names. |
Usage
import { Calendar } from "@/components/ui/Calendar";
// Uncontrolled
<Calendar />
// Single selection
const [date, setDate] = useState<Date>();
<Calendar mode="single" selected={date} onSelect={setDate} />
// Range selection
const [range, setRange] = useState<DateRange>();
<Calendar mode="range" selected={range} onSelect={setRange} />
// Disable weekends
<Calendar disabled={(d) => d.getDay() === 0 || d.getDay() === 6} />