Calendar
shadcn/ui calendar on React DayPicker, restyled on DESIGN.md tokens. 32px cells on a 4px radius, flat day buttons, primary selection, primary-soft range fill. Surface fill that turns transparent inside a card. Weeks start on Monday and dates read day/month/year, in Europe/Amsterdam, unless a locale or timeZone says otherwise.
import { Calendar } from "@stocklots/ui-components/components/calendar";
<Calendar mode="single" selected={date} onSelect={setDate} />Basic
Single selection. Today sits on muted; the pick is primary.
Range
mode="range" across two months. Ends are primary, the middle is primary-soft eased toward surface, with primary-strong ink.
Month and year
captionLayout="dropdown" for dates far from today.
Presets
Quick picks in the card footer move both the selection and the month.
Date and time
Time fields in the footer, sm inputs to match the cells.
Booked dates
Disabled and struck through via a modifier.
Custom cell size
--cell-size per breakpoint, with a second line per day.
Week numbers
showWeekNumber adds an ISO week column.
Time zone
Europe/Amsterdam is the default; pass timeZone to change it. The day never shifts by one.
Europe/Amsterdam · 20 October 2026
Manual entry
A field under the calendar. Typing a full date moves the pick; picking a day fills the field. Validates on blur.