Calendar

An inline month grid for selecting dates. Built on react-day-picker (DayPicker) — every day-picker prop passes straight through, so consult its docs for the full surface. We layer on the design-system styling, swap in our Button for day cells (CalendarDayButton) and nav, and wire up our lucide chevrons.

Calendar is the raw grid. For the common “click a field, pop a calendar” pattern, reach for DatePicker instead — it wraps this component in a Popover with a formatted trigger button. Use Calendar directly when you need the grid always visible, multi-month layouts, or modes beyond single-date.

Selection is uncontrolled-friendly but normally driven by state: hold the value yourself and pass selected + onSelect. The shape of selected follows mode — a Date for single, a DateRange for range, a Date[] for multiple.

Single date

mode="single" selects one day. selected is a Date | undefined; onSelect hands back the clicked day (or undefined when the selected day is clicked again).

June 2026

6/30/2026

import { Calendar } from "@vesyl/ui-next";
import { useState } from "react";

export default function CalendarSingle() {
  const [date, setDate] = useState<Date | undefined>(new Date());

  return (
    <div className="flex flex-col items-center gap-3">
      <Calendar
        mode="single"
        selected={date}
        onSelect={setDate}
        className="rounded-md border"
      />
      <p className="text-sm text-muted-foreground">
        {date ? date.toLocaleDateString() : "No date selected"}
      </p>
    </div>
  );
}

Date range

mode="range" selects a contiguous span. selected is a DateRange ({ from, to }) imported from react-day-picker. The first click sets from; the next sets to and fills the days between with the range styling.

June 2026

July 2026

6/30/2026 – 7/5/2026

import { Calendar } from "@vesyl/ui-next";
import { useState } from "react";
import type { DateRange } from "react-day-picker";

export default function CalendarRange() {
  const today = new Date();
  const [range, setRange] = useState<DateRange | undefined>({
    from: today,
    to: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 5),
  });

  return (
    <div className="flex flex-col items-center gap-3">
      <Calendar
        mode="range"
        selected={range}
        onSelect={setRange}
        numberOfMonths={2}
        className="rounded-md border"
      />
      <p className="text-sm text-muted-foreground">
        {range?.from ? range.from.toLocaleDateString() : "Start"}
        {" – "}
        {range?.to ? range.to.toLocaleDateString() : "End"}
      </p>
    </div>
  );
}

Multiple days

mode="multiple" toggles individual, non-contiguous days. selected is a Date[]; clicking a selected day removes it.

June 2026

1 day selected

import { Calendar } from "@vesyl/ui-next";
import { useState } from "react";

export default function CalendarMultiple() {
  const [dates, setDates] = useState<Date[] | undefined>([new Date()]);

  return (
    <div className="flex flex-col items-center gap-3">
      <Calendar
        mode="multiple"
        selected={dates}
        onSelect={setDates}
        className="rounded-md border"
      />
      <p className="text-sm text-muted-foreground">
        {dates && dates.length > 0
          ? `${dates.length} day${dates.length === 1 ? "" : "s"} selected`
          : "No days selected"}
      </p>
    </div>
  );
}

Multiple months

numberOfMonths renders that many months side by side — handy for range selection where the span crosses a month boundary.

June 2026

July 2026

import { Calendar } from "@vesyl/ui-next";
import { useState } from "react";

export default function CalendarTwoMonths() {
  const [date, setDate] = useState<Date | undefined>(new Date());

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      numberOfMonths={2}
      className="rounded-md border"
    />
  );
}

Disabling days

disabled takes a react-day-picker Matcher (or array of matchers) — a Date, a { from, to } range, a { before } / { after } bound, day-of-week, or a predicate. Disabled days can’t be selected and render muted.

June 2026

Pick any day from today forward

import { Calendar } from "@vesyl/ui-next";
import { useState } from "react";

export default function CalendarDisabled() {
  const [date, setDate] = useState<Date | undefined>(undefined);
  const today = new Date();
  today.setHours(0, 0, 0, 0);

  return (
    <div className="flex flex-col items-center gap-3">
      <Calendar
        mode="single"
        selected={date}
        onSelect={setDate}
        disabled={{ before: today }}
        className="rounded-md border"
      />
      <p className="text-sm text-muted-foreground">
        {date ? date.toLocaleDateString() : "Pick any day from today forward"}
      </p>
    </div>
  );
}

Reference

Calendar

Wraps react-day-picker DayPicker — it extends React.ComponentProps<typeof DayPicker>, so any day-picker prop (mode, selected, onSelect, numberOfMonths, disabled, month, defaultMonth, weekStartsOn, fromDate/toDate, fixedWeeks, locale, …) passes through. Only the additions and overridden defaults are listed below.

Prop	Type	Default	Description
`mode`	`"single" \| "range" \| "multiple"`	—	Selection behaviour; determines the shape of `selected` / `onSelect`
`selected`	`Date \| DateRange \| Date[]`	—	Current selection — typed to match `mode`
`onSelect`	`(value) => void`	—	Fires on selection change with the new value (shape matches `mode`)
`numberOfMonths`	`number`	`1`	How many months to render side by side
`disabled`	`Matcher \| Matcher[]`	—	Days that can’t be selected (date, range, `{ before }`, predicate, …)
`showOutsideDays`	`boolean`	`true`	Render trailing/leading days from adjacent months
`captionLayout`	`"label" \| "dropdown" \| "dropdown-months" \| "dropdown-years"`	`"label"`	Month/year header as a static label or selectable dropdowns
`buttonVariant`	`Button["variant"]`	`"ghost"`	`Button` variant used for the prev/next month nav buttons
`className`	`string`	—	Merged onto the root
`classNames`	`Partial<Record<keyof DayPicker classNames, string>>`	—	Per-slot class overrides, merged onto the defaults
`components`	`Partial<DayPicker components>`	—	Override individual day-picker render slots

CalendarDayButton

The render component for a single day cell — passed to DayPicker as the DayButton slot, so you rarely use it directly. Renders our Button (variant="ghost", size="icon") and reflects react-day-picker’s day modifiers onto data-* attributes (data-selected-single, data-range-start, data-range-end, data-range-middle, data-today) that drive the selection styling. Auto-focuses when the day carries the focused modifier. Extends react-day-picker’s DayButton props.

Prop	Type	Default	Description
`day`	`CalendarDay`	—	The day-picker day object (provides `day.date`)
`modifiers`	`Modifiers`	—	Active modifiers for the day (selected, range_*, today, focused)
`className`	`string`	—	Merged onto the day `Button`

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa