Calendar

react-fancy
Registry JSON
Why
Picking dates across single, range, and multi-select scenarios means reimplementing month navigation, comparing dates without timezone bugs, managing hover-state for ranges, and enforcing min/max/disabled constraints each time. Without a shared primitive, calendar UIs drift apart, agents can't programmatically select dates, and accessibility falls to luck.
What
Calendar is a fully controlled component with three selection modes—mode="single", "range", or "multiple"—each with its own value shape (Date, DateRange with start and end fields, or Date[]). Props like minDate, maxDate, and disabledDates enforce constraints. Agents can mutate selection by passing a new value to onChange.
How
Import Calendar from @particle-academy/react-fancy, set mode="single" (or "range" or "multiple"), bind value (a Date, DateRange, or Date[] depending on mode) and onChange, and optionally pass minDate, maxDate, or disabledDates to constrain which dates are selectable.