Data/Calendar
Calendar
An accessible date picker calendar with month navigation and flexible date disabling via a predicate function.
import { Calendar } from "@animui/ui"Basic
A controlled calendar. Pair value with onChange to manage selection state.
July 2026
Su
Mo
Tu
We
Th
Fr
Sa
Date range constraint
Use the disabled predicate to block dates outside an allowed window.
July 2026
Su
Mo
Tu
We
Th
Fr
Sa
Only the next 3 months are selectable
Disabled dates
Pass a function to disabled to mark specific dates as non-selectable — weekends, holidays, or any custom logic.
July 2026
Su
Mo
Tu
We
Th
Fr
Sa
Weekends are disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | Date | undefined | undefined | The currently selected date. Pass undefined for no selection. |
onChange | (date: Date) => void | — | Callback fired when the user clicks a date cell. |
disabled | (date: Date) => boolean | — | Return true to disable a specific date (dims it, prevents selection). |
className | string | — | Additional CSS classes applied to the calendar root. |