Calendar

Installation

import { Calendar } from "@aspyn-io/kit";

Single date

Month and year dropdowns are built in, so you can jump to any date without clicking through the nav arrows.

Date picker (Popover composition)

The standard date-picker pattern: a Calendar inside a Popover.

Range selection

Disabled & constrained dates

disabled takes any react-day-picker Matcher or array of them, so you can mix min/max bounds, day-of-week patterns, specific blackout dates, and predicates. Disabled days are also unselectable via keyboard.

Presets

Pair the calendar with quick-pick buttons that set the selected date and jump the visible month to match.

Notes

• Built on react-day-picker v10: disabled dates, min/max, and localization all pass through.
• disabled accepts a Matcher or Matcher[]: a Date, { from, to } range, { before } / { after } for min/max, { dayOfWeek } patterns, or a (date) => boolean predicate. Combine them in an array.
• Month + year dropdowns are on by default (built from the kit's Select). The year range defaults to 100 years back through 10 years ahead; pass startMonth/endMonth to constrain it, or captionLayout="label" for a static caption.
• For a typeable date input — type a date as numbers or words, or pick one — use DateField, which packages this composition.