Calendar
Browse dates in a clear, compact month view.
npm install https://animui.stracture.net/__local/package.tgz- Inline date picking where the month should stay visible, such as booking pages.
- Picking one date with blocked days via minDate, maxDate, and disabledDates.
- Use date-picker for a form field that opens a calendar popover.
- Use time-picker for times of day.
- Use booking-pill for a full compact booking flow.
Installation
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { Calendar } from 'animui/calendar';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideimport { Calendar } from "animui/calendar"; export function DeliveryDate() { const [date, setDate] = useState<Date>(); return ( <Calendar value={date} onChange={setDate} minDate={new Date()} disabledDates={(day) => day.getDay() === 0} showToday /> );}API reference
2 parts. The first is the root.
Calendar
A month grid for picking one date, with sliding month changes and a gliding selection.
valueDate–Selected date.onChange(date: Date) => void–Called when a day is picked.monthDate–Controlled visible month.onMonthChange(month: Date) => void–Called with the first of the new month when navigating.minDateDate–Earliest selectable day.maxDateDate–Latest selectable day.disabledDates(date: Date) => boolean–Return true to block a day, such as weekends.localestring"en-US"Month, weekday, and day names.classNamestring–Added to the root section.showTodaybooleanfalseAdds a Today button that returns to the current month and selects today when allowed.useToday
Hook returning the viewer's local date, undefined during SSR and hydration, and updating across midnight.
No props.
- Arrow keys
- Move by one day or one week, skipping blocked days and crossing months.
- HomeorEnd
- Move to the start or end of the week.
- PageUporPageDown
- Move by one month; with Shift, by one year.
- EnterorSpace
- Selects the focused day.
- Days sit in a role="grid" with role="row" and role="gridcell" buttons carrying full date aria-labels, aria-selected, and aria-current="date" for today.
- Roving tabindex keeps one day in the tab order; month changes are announced through a polite live region.
- Previous and next buttons are labelled and use aria-disabled at the min or max month.
- Months slide in the direction of travel while the title letters and year digits roll; the selection highlight glides between days on the morph spring.
- Reduced motion, applied after hydration, swaps months and moves the highlight instantly.
- The calendar is min(100%, 328px) wide and days are square cells that scale with it.
- The header is a container query: below 260px the title takes its own row and the controls move under it.
- Only the incoming month is observed with a ResizeObserver, to morph between four, five, and six rows.
- Each day is a button, so a month is about 42 cells; render one calendar rather than many side by side.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use inline where the calendar is always visible, such as booking pages. Use date-picker for a form field that opens a calendar popover.
- value is controlled only; month can be controlled or left internal.
- Also exports date helpers addDays, addMonths, sameDay, and startOfDay, and the CalendarDateMatcher type.
The full library index for assistants is at /llms.txt.