Calendar
A standalone monthly calendar view with single and range date selection, keyboard navigation, and full RTL support.
Installation
tsx
import { Calendar } from "madagent";Default
August 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
With Selected Date
February 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
With Min/Max Constraints
August 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Range Selection
August 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
| Prop | Type | Default | Description |
|---|---|---|---|
mode | "single""range" | "single" | Selection mode — single date or date range |
value | Date | - | Selected date in single mode (controlled) |
defaultValue | Date | - | Default selected date in single mode (uncontrolled) |
onChange | (date: Date) => void | - | Called when a date is selected in single mode |
rangeValue | { start: Date; end: Date }null | - | Selected range in range mode (controlled) |
defaultRangeValue | { start: Date; end: Date } | - | Default range in range mode (uncontrolled) |
onRangeChange | (range: { start: Date; end: Date } | null) => void | - | Called when the range changes in range mode |
minDate | Date | - | Earliest selectable date |
maxDate | Date | - | Latest selectable date |
className | string | - | Additional CSS class on the root element |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
August 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Usage
tsx
<Calendar value={date} onChange={setDate} />