02 — COMPONENTS
Calendar
Scheduling and date-selection component adapted from shadcn/ui to fit the Chuv Studio foundation. It follows the same section, card, and typography structure used across the design system.
Core Patterns
Use calendars for scheduling, selecting availability windows, and showing date structure clearly
<Calendar
mode="single"
selected={selectedDate}
onSelect={setSelectedDate}
/><Calendar
mode="range"
selected={range}
onSelect={setRange}
/>Studio Contexts
Patterns tailored to planning production, workshops, launches, and field visits
Sprint Planning
Define the next review and deployment cycle.
Workshop Window
Reserve a date interval for client immersion and feedback.
Roadmap Snapshot
Track milestone checkpoints across two connected months.
<Calendar
mode="multiple"
selected={[launch, handoff, review]}
numberOfMonths={2}
/>Variants And States
Single, multiple, range, and disabled date configurations
<Calendar
mode="multiple"
selected={dates}
onSelect={setDates}
/><Calendar
mode="single"
disabled={{ before: new Date() }}
/>Interactive Demo
Preview selection modes and density options in the same calendar foundation
Selection Mode
Months Visible
Outside Days
Selected: April 16th, 2026
Usage
Import, props, and accessibility guidance
import { Calendar } from "@/components/ui/calendar"Selection
`mode`, `selected`, `onSelect`, and `disabled` control how dates are chosen and restricted.
Layout
`numberOfMonths`, `captionLayout`, and `showOutsideDays` define density and calendar visibility.
The calendar inherits keyboard navigation and screen-reader support from `react-day-picker`. Keep visible labels close to the calendar and avoid using color alone to communicate date state.