UnreviewedNot SSR-safe. It reads the current date (Temporal.Now) and locale
(navigator.language) at render, so a server render and the client render
disagree on the highlighted "today" and on localized labels, causing a
hydration mismatch. Render it client-side only (Astro client:only, or a
dynamic import inside useEffect).
<Calendar>is a single-date month grid. It uses Anta components in light DOM. Days and the previous/next chevrons are<Button>s, so they use the design system's button states. A selected day is atertiaryButton in itsselectedstate, using thebrandtone so the active date uses the brand color. All date math runs on the Temporal engine (@antadesign/antaexportsbuildMonth& friends), and the value is an ISOYYYY-MM-DDstring.The grid lives in a form-associated
<a-calendar>element, which manages the submitted value, reset, and restore. The wrapper manages view month, selection, keyboard, and rovingtabindex. The month switcher is a sibling rendered outside the grid, so it can be extended (month/year pickers) independently.Controlled (
value+onStateChange) or uncontrolled (defaultValue). Requires@antadesign/anta/elements(client-side only).