Forms

Calendar

A month grid for picking a date or a range.

import { Calendar } from "@flinbu/seed";

Single, Sundays disabled

November 2026

M	T	W	T	F	S	S

import { Calendar } from "@flinbu/seed";

  const [d, setD] = React.useState<Date | null>(new Date());
  return <Calendar value={d} onValueChange={setD} isDateDisabled={(x) => x.getDay() === 0} />;

Range over two months

Hovering previews the range before the second click.

November 2026

M	T	W	T	F	S	S

December 2026

M	T	W	T	F	S	S

import { Calendar } from "@flinbu/seed";

  const t = new Date();
  const [r, setR] = React.useState<DateRange | null>({ from: new Date(t.getFullYear(), t.getMonth(), 3), to: new Date(t.getFullYear(), t.getMonth(), 9) });
  return <Calendar mode="range" months={2} value={r} onValueChange={setR} />;

Use it for

Inline on a page; DatePicker puts it in a popover.

Props

Prop	Type	Default	Description
`mode`	`'single''range'`	`'single'`	Range values are { from, to }.
`value / defaultValue`	`DateDateRangenull`	–	Selection.
`onValueChange`	`(value) => void`	–	Called on pick.
`months`	`12`	`1`	Months side by side.
`min / max`	`Date`	–	Limits.
`isDateDisabled`	`(date: Date) => boolean`	–	Unavailable days.
`weekStartsOn`	`number`	`1`	0 Sunday to 6 Saturday.
`locale`	`string`	–	Month and day names.

Accessibility

A grid per month: arrows move by day and week, Page Up and Down by month, Home and End to the week's edges; only the focused day is in the tab order.
Today has aria-current=date; disabled days are struck through.