opinion
Calendar
A month grid for picking one date.
Pick a launch dateDays before 20 Oct are out of reach
Su
Mo
Tu
We
Th
Fr
Sa
Selected: Sat 24 Oct
Su
Mo
Tu
We
Th
Fr
Sa
In context
RescheduleMoving the payroll cut-off
Move “Payroll cut-off”
Harbour rebrand
Harbour launch is on 24 Oct
Su
Mo
Tu
We
Th
Fr
Sa
Props
| Prop | Type | Required | Default |
|---|---|---|---|
value | Date | undefined | No | — |
defaultValue | Date | undefined | No | — |
onValueChange | ((date: Date) => void) | undefined | No | — |
month | Date | undefined | No | — |
defaultMonth | Date | undefined | No | — |
onMonthChange | ((month: Date) => void) | undefined | No | — |
minDate | Date | undefined | No | — |
maxDate | Date | undefined | No | — |
rangeStart | Date | undefined | No | — |
rangeEnd | Date | undefined | No | — |
data-rebar-* attributes
data-rebar-component="calendar"; each day cell carries data-rebar-part="day" plus data-rebar-selected, data-rebar-today, and data-rebar-outside (a leading/trailing day from an adjacent month) as boolean attributes.
Migrating to Ant Design
AntD's own Calendar is a close direct equivalent — value/onSelect map to this component's value/onValueChange. One real difference to flag, not gloss over: AntD's Calendar takes a dayjs value, while this component uses a plain native Date — a migration needs to wrap the value in dayjs(value) at the boundary.