Calendar

InstallCopy Anchor Link

pnpm exec vegastack-design verify calendar

pnpm dlx shadcn@4.21.0 add @vegastack/calendar

UsageCopy Anchor Link

import { Calendar } from "@/components/ui/calendar";

const [date, setDate] = React.useState<Date | undefined>(new Date());

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  className="rounded-lg border"
/>;

AnatomyCopy Anchor Link

ExamplesCopy Anchor Link

AboutCopy Anchor Link

Calendar is React DayPicker with our chrome on top: the day grid, the range logic and the month navigation are the library's; the tokens, the CalendarDayButton and the nav buttons are ours. Every prop DayPicker takes passes straight through.

Date PickerCopy Anchor Link

Put a Calendar inside a Popover behind a Button and you have a date picker; see Date Picker for the composed component.

Persian / Hijri / Jalali CalendarCopy Anchor Link

The chrome mirrors for a right-to-left document on its own. To change the calendar system, edit components/ui/calendar.tsx and swap the import:

- import { DayPicker } from "react-day-picker"
+ import { DayPicker } from "react-day-picker/persian"

Selected Date (With TimeZone)Copy Anchor Link

Pass timeZone so a selected day is the day the user sees. Detect it in an effect, not during render — the server and the client are not in the same zone, and reading it during render is a hydration mismatch.

BasicCopy Anchor Link

className="rounded-lg border" is all the surface a bare calendar needs.

Range CalendarCopy Anchor Link

mode="range" selects a span; numberOfMonths shows more than one month at a time.

Month and Year SelectorCopy Anchor Link

captionLayout="dropdown" replaces the caption with month and year dropdowns.

PresetsCopy Anchor Link

Drive month and selected from outside to offer shortcuts.

Date and Time PickerCopy Anchor Link

A Card with the calendar in its content and two time fields in its footer.

Booked datesCopy Anchor Link

disabled blocks the days; modifiers and modifiersClassNames mark them, so unavailability is carried by the strike-through as well as by the dimming.

Custom Cell SizeCopy Anchor Link

--cell-size sets the grid's cell, and it takes breakpoint-specific values. A custom DayButton renders anything you like inside a day.

Week NumbersCopy Anchor Link

showWeekNumber adds the ISO week column.

RTLCopy Anchor Link

The two nav chevrons rotate and the range caps swap ends, so a right-to-left document reads correctly without any extra work.

StatesCopy Anchor Link

Selected, today, disabled and outside days in one frame.

API ReferenceCopy Anchor Link

Everything else is React DayPicker's own API — see its documentation. CalendarDayButton accepts DayPicker's DayButton props plus an optional locale.

AccessibilityCopy Anchor Link

• React DayPicker renders the month as a real <table> with column headers, and the day buttons carry aria-selected, aria-disabled and data-day; ←/→, ↑/ ↓, Home/End and PageUp/ PageDown all move the focused day.
• The day button is a Button size="icon" at --cell-size (28px by default), so it clears the 24px target floor (A11Y-2) without a hit-area pseudo-element.
• Focus is the global 2px :focus-visible outline (FOC-1); upstream's ring-[3px] glow on the focused day is removed (FOC-6).
• Booked or unavailable days should carry a non-colour marker as well as the dim — the Booked dates example uses a strike-through (A11Y-8).
• Today's day button carries aria-current="date", so a screen reader hears it as the current date; visually it is an outline with medium weight, never the hover grey (A11Y-25).
• Calendar is a client component: it holds the focused day and reacts to selection.

Do / Don'tCopy Anchor Link

DeviationsCopy Anchor Link

Upstream's file plus packages/ui/upstream/patches/calendar.patch. Every hunk:

• FOC-1, FOC-6 — the focused day's group-data-[focused=true]/day:border-ring, :ring-[3px] and :ring-ring/50 glow is removed. The day button is a real <button>, so the global :focus-visible outline in base.css marks it; the relative z-10 that lifted the focused cell above its neighbours stays.
• A11Y-2 — dropdown_root gains h-full min-h-6. With captionLayout="dropdown" the real <select> is absolute inset-0 of that root, which upstream sizes from the caption's 20px line box — a 20px-tall pointer target. The dropdowns row is already h-(--cell-size), so filling it costs no layout.
• TYP-18 — the weekday and week-number labels' text-[0.8rem] becomes text-xs.
• A11Y-25 — today is marked without the hover grey: the today cell drops upstream's bg-muted, and the day button takes font-medium plus, only while today is unselected, a 1px border-foreground/40 outline (a border, never a ring — BRD-1). A selected today keeps the ordinary primary or range fill. Today's button carries aria-current="date", which react-day-picker does not set. A read-only calendar, which renders no day buttons, draws the same outline and weight on today's cell.
• DOC-2 — cn is imported from @vegastack/design.
• DOC-1 — prettier reflow plus the registry-stamp.mjs provenance header the three-copy model needs; no decision of its own.