Calendar
Month-view calendar for date selection. Supports single, multiple, and range modes.
Live Demo
Single
July 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Range
July 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Props
| Prop | Type | Default | Description |
|---|---|---|---|
mode | "single" | "multiple" | "range" | "single" | Selection mode: single, multiple, or range |
selected | Date | Date[] | DateRange | — | Currently selected date(s) |
onSelect | (date) => void | — | Callback when selection changes |
disabled | Date | Date[] | Matcher | — | Disabled date(s) or matcher function |
showOutsideDays | boolean | true | Show days from adjacent months |
Usage
import { Calendar } from '@ghiberti85/ui'
// Single date
const [date, setDate] = useState<Date | undefined>()
<Calendar mode="single" selected={date} onSelect={setDate} />
// Date range
const [range, setRange] = useState<{ from?: Date; to?: Date }>()
<Calendar mode="range" selected={range} onSelect={setRange} />
// Multiple dates
const [dates, setDates] = useState<Date[]>()
<Calendar mode="multiple" selected={dates} onSelect={setDates} />
// Disable weekends
<Calendar mode="single" disabled={{ dayOfWeek: [0, 6] }} />