Calendar
Updated
Calendar is a month grid in pixel ink, for one date or a range. Arrows move a day or a week, Page Up and Down change the month, and Enter picks. Dates are "YYYY-MM-DD" strings, so no time zone can shift a day. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.
Example
import "@/components/dithercharts/controls.css"
import { Calendar } from "@/components/dithercharts/calendar"
<Calendar
defaultValue="2026-10-14"
min="2026-10-05"
// Weekends off; the dates are UTC, so this is the same day everywhere.
isDateDisabled={(date) => [0, 6].includes(new Date(date).getUTCDay())}
onValueChange={(date) => setDay(date)}
/>
// A start and an end, as { from, to }.
<Calendar mode="range" weekStartsOn={1} onValueChange={setRange} />Install
Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.
npx dithercharts add calendar
Props
It renders a native element, so every other attribute that element takes passes through.
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | Type "single" | "range" | Default – | "single" (the default) picks one date; "range" picks a start and an end, the value becoming a DateRange. |
| value | Type string | DateRange | Default – | The chosen date as "YYYY-MM-DD" (a DateRange in range mode), for a controlled calendar; pair it with onValueChange. |
| value.from | Type string | Default – | |
| value.to | Type string | Default – | |
| defaultValue | Type string | DateRange | Default – | The date (or range) chosen at first, for an uncontrolled calendar. |
| defaultValue.from | Type string | Default – | |
| defaultValue.to | Type string | Default – | |
| onValueChange | Type ((value: string) => void) | ((value: DateRange) => void) | Default – | Called with the chosen date, or the range so far in range mode. |
| min | Type string | Default – | The earliest date that can be chosen, as "YYYY-MM-DD". |
| max | Type string | Default – | The latest date that can be chosen, as "YYYY-MM-DD". |
| isDateDisabled | Type (date: string) => boolean | Default – | Rules out other dates, e.g. weekends. |
| weekStartsOn | Type 0 | 1 | 2 | 3 | 4 | 5 | 6 | Default 0 | The first column: 0 is Sunday, 1 Monday, and so on. |
| locale | Type string | Default the browser's | The BCP 47 locale for month and day names. |
| className | Type string | Default – |