Calendar

The calendar is for choosing a date or date range without leaving the current workflow. In this system it stays compact, typographic, and neutral enough to sit inside popovers, cards, scheduling panels, or booking flows.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

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

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
/>

Why This Primitive Exists

The Swiss calendar wraps react-day-picker so the project can keep its full selection model while matching the rest of the design system.

• Use it when the user needs to pick a concrete day or span of days.
• Prefer it to a freeform text input when accuracy matters more than speed.
• Keep it close to the task it affects, such as booking, review scheduling, or release planning.

Examples

Single Date Selection

Start with mode="single" when the workflow depends on one exact date.

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
/>

Range Selection

Switch to mode="range" when the user is defining a window rather than a point in time. The component already styles range_start, range_middle, and range_end states, so range mode reads clearly without extra class work.

<Calendar
  mode="range"
  numberOfMonths={2}
  selected={range}
  onSelect={setRange}
/>

Dropdown Captions In A Scheduling Panel

The wrapper supports captionLayout="dropdown" and a repo-specific buttonVariant prop. That combination is useful when a scheduling surface needs explicit month and year controls without introducing a louder navigation treatment.

<Calendar
  mode="single"
  captionLayout="dropdown"
  buttonVariant="outline"
  selected={releaseDate}
  onSelect={setReleaseDate}
/>

In Context

The calendar is strongest when the selected date sits next to the status, owner, and action it changes. That keeps the scheduling decision concrete instead of abstract.

<div className="grid gap-4 lg:grid-cols-[auto_18rem]">
  <Calendar
    mode="single"
    selected={releaseDate}
    onSelect={setReleaseDate}
    buttonVariant="outline"
  />
  <div>{/* release summary, status, and confirmation actions */}</div>
</div>

Guidance

Pick The Right Selection Mode

• Use single for due dates, publish dates, or one-off appointments.
• Use range for stays, review windows, and travel or availability spans.
• Use multiple only when several independent days can be selected at once.

Keep The Calendar Near Its Consequence

• Pair it with summary text or actions that explain what the chosen date changes.
• If the user still needs time, timezone, or recurrence rules, keep those controls adjacent instead of overloading the day cell UI.
• Avoid dropping a full calendar into a page when a compact popover or side panel would keep focus clearer.

Use Customization Sparingly

• Reach for buttonVariant to match the surrounding surface, not to create hierarchy inside the calendar itself.
• Use captionLayout="dropdown" when readers need faster month/year jumps.
• Pass classNames, components, or formatters only when you genuinely need to extend react-day-picker behavior.

API Reference

Calendar

Calendar forwards React.ComponentProps<typeof DayPicker>, so the underlying react-day-picker props such as mode, selected, onSelect, disabled, numberOfMonths, captionLayout, and defaultMonth remain available.

CalendarDayButton

The file also exports CalendarDayButton, the custom day-cell button used by the wrapper.