Calendar

Standalone month-grid date picker backed by React Aria; supports single-date and range selection across one or two months.

stable
since v0.1.0
0.98 kB
forms
date

Preview

Open

tsx

import { Calendar } from '@arshad-shah/cynosure-react/calendar';
import { parseDate } from '@internationalized/date';

export default function Example() {
  return <Calendar aria-label="Event date" defaultValue={parseDate('2026-04-17')} />;
}

Controlled

Drive selection from state by passing value + onChange. Values are @internationalized/date DateValues.

Preview

Open

tsx

import { Calendar } from '@arshad-shah/cynosure-react/calendar';
import { type CalendarDate, getLocalTimeZone, today } from '@internationalized/date';
import { useState } from 'react';

export default function Example() {
  const [value, setValue] = useState<CalendarDate | null>(today(getLocalTimeZone()));
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
      <Calendar aria-label="Event date" value={value} onChange={setValue} />
      <p style={{ fontSize: '0.875rem', color: 'var(--cynosure-color-fg-muted)' }}>
        Selected: {value?.toString() ?? 'none'}
      </p>
    </div>
  );
}

Dual month

Use visibleMonths={2} to render two adjacent month grids — useful in dense scheduling UIs.

Preview

Open

tsx

import { Calendar } from '@arshad-shah/cynosure-react/calendar';
import { parseDate } from '@internationalized/date';

export default function Example() {
  return (
    <Calendar aria-label="Event date" defaultValue={parseDate('2026-04-17')} visibleMonths={2} />
  );
}

Range selection

RangeCalendar selects a start / end pair. It defaults to two visible months.

Preview

Open

tsx

import { RangeCalendar } from '@arshad-shah/cynosure-react/calendar';
import { parseDate } from '@internationalized/date';

export default function Example() {
  return (
    <RangeCalendar
      aria-label="Trip dates"
      defaultValue={{
        start: parseDate('2026-04-12'),
        end: parseDate('2026-04-18'),
      }}
    />
  );
}

Pass any node to footer to slot a “Go to today” link, keyboard hints, or a clear button below the grid.

Preview

Open

tsx

import { Calendar } from '@arshad-shah/cynosure-react/calendar';
import { type CalendarDate, getLocalTimeZone, today } from '@internationalized/date';
import { useState } from 'react';

export default function Example() {
  const tz = getLocalTimeZone();
  const [focused, setFocused] = useState<CalendarDate | undefined>(undefined);
  return (
    <Calendar
      aria-label="Event date"
      focusedValue={focused}
      onFocusChange={setFocused}
      footer={
        <div style={{ padding: '0.75rem', display: 'flex', justifyContent: 'flex-end' }}>
          <button
            type="button"
            onClick={() => setFocused(today(tz))}
            style={{
              fontSize: '0.875rem',
              background: 'transparent',
              border: 0,
              color: 'var(--cynosure-color-accent-solid)',
              cursor: 'pointer',
            }}
          >
            Go to today
          </button>
        </div>
      }
    />
  );
}

API

PropTypeDefaultDescription

className

string

—

style

CSSProperties

—

visibleMonths

1|2

Number of months shown side by side. Use `2` for range-heavy UIs. Default `1` for `<Calendar>`, `2` for `<RangeCalendar>`.

footer

ReactNode

—

Footer rendered below the grid — e.g. "Go to today" or keyboard hints.

Accessibility

Built on React Aria — exposes proper role="grid" semantics and full keyboard traversal (arrows, Home/End, PageUp/PageDown).
The header’s previous / next buttons carry aria-label="Previous month" / "Next month".
Always pass aria-label (or visible labelling) on Calendar and RangeCalendar so screen readers can announce what the date is for.
Disabled and unavailable dates from React Aria are respected and skipped during keyboard navigation.

Recipes

Use minValue / maxValue to clamp the selectable range.
For range pickers in narrow layouts, set visibleMonths={1} to drop down to a single grid.
Use focusedValue + onFocusChange to programmatically jump back to today.

Calendar

Controlled

Dual month

Range selection

With footer

API

Accessibility

Recipes