Components

Calendar

A date picker calendar with month navigation, day selection, and support for min/max date constraints.

Installation

npm install @trinkui/react

Import

import { Calendar } from "@trinkui/react";

Usage

Click a day to select it. Navigate between months using the arrow buttons. Today is outlined.

March 2026

SuMoTuWeThFrSa

const [date, setDate] = useState<Date | null>(null);

<Calendar
  value={date}
  onChange={(d) => setDate(d)}
/>

Min / Max Date

Restrict selectable dates with minDate and maxDate. Dates outside the range are dimmed and unclickable. This demo allows 5 days in the past through 30 days in the future.

March 2026

SuMoTuWeThFrSa

<Calendar
  value={date}
  onChange={(d) => setDate(d)}
  minDate={new Date("2026-03-13")}
  maxDate={new Date("2026-04-17")}
/>

Disabled

The entire calendar becomes non-interactive when disabled.

March 2026

SuMoTuWeThFrSa

<Calendar disabled />

Props

Prop	Type	Default	Description
value	Date \| null	null	The currently selected date
onChange	(date: Date) => void	--	Callback when a date is selected
minDate	Date	--	Earliest selectable date
maxDate	Date	--	Latest selectable date
disabled	boolean	false	Disable the entire calendar

Accessibility

Uses role="grid" on the day grid and role="gridcell" on each day button.
Each day button has an aria-label with the full date string for screen readers.
Selected date uses aria-selected="true".
Navigation buttons have accessible labels: "Previous month" and "Next month".
Disabled dates are marked with the disabled attribute.

← Button Card →