Calendar

The Calendar component wraps react-day-picker v9 with nim-ui's OKLCH tokens, dark-mode support, and focus-visible rings. It supports single-date, range, and multiple-date selection, plus full keyboard navigation and i18n through react-day-picker's built-in features.

Import

import { Calendar } from '@nim-ui/components';

You'll also need to import react-day-picker's styles once in your app's root entry — typically import 'react-day-picker/style.css'; — so the default layout ships alongside nim-ui's overrides.

Single Date

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

import { useState } from 'react';
import { Calendar } from '@nim-ui/components';

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

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
    />
  );
}

Range Selection

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

import { useState } from 'react';
import { Calendar } from '@nim-ui/components';
import type { DateRange } from 'react-day-picker';

export function RangeExample() {
  const [range, setRange] = useState<DateRange | undefined>();

  return (
    <Calendar
      mode="range"
      selected={range}
      onSelect={setRange}
      numberOfMonths={2}
    />
  );
}

Multiple Dates

<Calendar
  mode="multiple"
  selected={dates}
  onSelect={(value) => setDates(value ?? [])}
/>

import { useState } from 'react';
import { Calendar } from '@nim-ui/components';

export function MultipleExample() {
  const [dates, setDates] = useState<Date[]>([]);

  return (
    <Calendar
      mode="multiple"
      selected={dates}
      onSelect={(value) => setDates(value ?? [])}
    />
  );
}

Buddhist Era

Set calendar="buddhist" to display Buddhist Era years in the calendar UI. Selection values are still JavaScript Date objects, so forms and APIs can keep using Gregorian ISO values.

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

Disabled Dates

Pass a matcher to disable specific dates — a single date, an array, a range, or a predicate function.

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  disabled={[
    { before: new Date() }, // disable past dates
    { dayOfWeek: [0, 6] },   // disable weekends
  ]}
/>

Props

Calendar passes through all react-day-picker props. The most common are listed below.

Accessibility

• Implements the ARIA date picker pattern via react-day-picker
• Full keyboard navigation: arrow keys move day-by-day, Page Up/Down move month-by-month, Home/End jump to the start/end of the week
• Today cell gets a visual indicator (neutral background) and the selected cell uses the primary-600 token
• Outside days (from prev/next month) dimmed with opacity-50 and can be hidden via showOutsideDays={false}
• Focus-visible rings from buttonVariants apply to day buttons and nav arrows
• aria-selected reflects selection state; aria-disabled reflects disabled dates

Keyboard Support

Related Components

• DatePicker — Calendar composed with Popover for form inputs