Components / Date & time

Calendar

A month grid for a single date or a range, with bounds, disabled dates and full keyboard navigation.

@ruckc/truss-ui Date & time

Import

import { Calendar } from '@ruckc/truss-ui';

Playground

API

Prop	Type	Default	Description
mode	'single' | 'range'	'single'	`single` picks one date; `range` picks a start and end.
value bindable	string	—	The current value. Bind it with `bind:value`.
range bindable	DateRange	{}	The selected range `{ start, end }` (or a `[low, high]` pair for histograms). Bind it with `bind:range`.
min	string	—	Minimum allowed value.
max	string	—	Maximum number to show before collapsing the rest.
weekStart	number	0	0 = Sunday … 6 = Saturday
locale	string	'en-US'	BCP-47 locale used for month and weekday names.
disabledDate	(iso: string) => boolean	—	Return true for dates that cannot be chosen.
onpick event	() => void	—	Fires when a selection is complete (single pick, or range end chosen).
onrange event	(r: DateRange) => void	—	Called with every range change (including the in-progress first click), for controlled use.