Calendar

<Calendar value={date} onSelect={setDate} />

Calendar is the month grid. It is deliberately dependency-free: Intl.DateTimeFormat already knows every locale's month and weekday names, and the only arithmetic a calendar needs is "add a day", which Date does correctly across DST. A date library for this would cost more than the component.

Everything works on local midnight — storing a time component is how a calendar ends up off by one for anyone east of Greenwich after 23:00.

Usage

import { Calendar } from "@heyo-sh/heyo-ui";const [date, setDate] = useState<Date | null>(null);<Calendar value={date} onSelect={setDate} />;

Calendar is controlled: it owns the month you are looking at, you own the selection.

Ranges

mode="range" selects two dates and fills everything between them. The value is { from, to }, with to staying null until the second click.

<Calendarmode="range"months={2}value={range}onSelect={setRange}/>

Bounds and blackouts

min and max set the window; disabledDate adds any rule on top of it — weekends, holidays, days already booked.

<Calendarvalue={date}onSelect={setDate}min={new Date()}disabledDate={(day) => day.getDay() === 0 || day.getDay() === 6}/>

Locale and week start

locale drives the month and weekday names through Intl; weekStartsOn is 1 (Monday) by default, because most of the world starts there.

<Calendar locale="pl-PL" weekStartsOn={1} value={date} onSelect={setDate} />

Helpers

Both are exported because a calendar's caller always ends up needing them.

import { isSameDay, startOfDay } from "@heyo-sh/heyo-ui";startOfDay(new Date()); // local midnightisSameDay(a, b); // same calendar day, ignoring time

Properties

DateRange