Pesto UI

Calendar

A month grid for picking a day or a range. Date Picker puts this behind a trigger; use the calendar bare when it should stay on the page.

tsx
import { Calendar } from "@pestoui/core"

Single date

mode="single" with selected and onSelect is a controlled date. Arrow keys move day by day; Page Up and Page Down move by month.

August 2026

Range

mode="range" selects a start and an end; the days between take the tinted fill. Left uncontrolled here, so the calendar keeps the selection itself.

August 2026

Month and year dropdowns

captionLayout="dropdown" swaps the caption for month and year selects — the right choice for a birth date or anything far from today. startMonth and endMonth bound the list.

August 2026

Props

PropTypeDefaultDescription
mode"single" | "multiple" | "range"—What a click selects. Omit it for a display-only calendar.
selected / onSelectDate | Date[] | DateRange / (value) => void—Controlled selection, shaped by mode. Leave both out and the calendar holds the selection itself.
defaultMonthDate—The month shown first. Defaults to the current month.
numberOfMonthsnumber1How many month grids to show side by side.
captionLayout"label" | "dropdown" | "dropdown-months" | "dropdown-years""label"A plain month heading, or selects for month, year or both.
showOutsideDaysbooleantrueFills the first and last week with the neighbouring months' days, muted.
disabledMatcher | Matcher[]—Days that cannot be picked — a date, a range, { before: date }, or a function.
buttonVariantButton["variant"]"ghost"The variant used for the previous and next month buttons.
PreviousButton GroupNext Card

Pesto UI · 117 documented components