Calendar

Basic

A full-featured month calendar with single date selection, range selection, keyboard navigation, and smooth animated month transitions.

<Calendar />

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add calendar

pnpm dlx @work-rjkashyap/unified-ui add calendar

npx @work-rjkashyap/unified-ui add calendar

bunx @work-rjkashyap/unified-ui add calendar

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import { Calendar } from "@work-rjkashyap/unified-ui";

Basic Usage

Drop Calendar anywhere you need a date picker grid. It manages its own internal state by default (uncontrolled).

<Calendar onSelect={(date) => console.log(date)} />

Single Date Selection

The default mode selects a single date. Pass onSelect to receive the selected date.

const [date, setDate] = useState<Date | null>(null);<Calendarmode="single"selected={date}onSelect={setDate}/>

Range Selection

Set mode="range" to allow selecting a date range. Click once for the start date, then again for the end date.

const [range, setRange] = useState<DateRange | null>(null);<Calendarmode="range"selectedRange={range}onSelectRange={setRange}/>

Week Numbers

Show ISO week numbers in a leading column with showWeekNumbers.

<Calendar showWeekNumbers />

Disabled Dates

Use the disabledDate function to disable specific dates, or pass minDate / maxDate to restrict the selectable range.

// Disable weekends
<Calendar
  disabledDate={(date) => date.getDay() === 0 || date.getDay() === 6}
/>

// Restrict to a date range
<Calendar
  minDate={new Date(2025, 0, 1)}
  maxDate={new Date(2025, 11, 31)}
/>

// Disable specific dates
const holidays = [new Date(2025, 11, 25), new Date(2025, 0, 1)];
<Calendar
  disabledDates={holidays}
/>

Controlled Month

Control which month is displayed using the month and onMonthChange props.

const [month, setMonth] = useState(new Date(2025, 5));

<Calendar
  month={month}
  onMonthChange={setMonth}
/>

Default Month

Set the initially displayed month without controlling it:

<Calendar defaultMonth={new Date(2025, 11)} />

With DatePicker

Calendar is the core building block for the DatePicker component, which wraps it in a popover with a trigger input:

import { DatePicker } from "@work-rjkashyap/unified-ui/components";

<DatePicker
  onSelect={(date) => setDate(date)}
  placeholder="Pick a date"
/>

Props

Day States

The calendar uses CVA variants for day cell styling:

Motion

• Month transitions — Animated slide left/right with opacity fade when navigating months. Direction-aware: sliding left for "next" and right for "previous".
• Day selection — Subtle spring scale animation on the selected day cell.
• All animations respect prefers-reduced-motion via useReducedMotion().

Keyboard Navigation

Accessibility

• Each day cell is a focusable <button> with a complete aria-label including weekday, month, day, and year.
• Disabled dates have aria-disabled="true" and are skipped during keyboard navigation.
• The month navigation buttons have descriptive aria-label values ("Previous month", "Next month").
• The calendar grid uses role="grid" semantics.
• Selected dates have aria-selected="true".

Design Tokens