Calendar

Calendars display a monthly grid view with accessible month navigation, keyboard date stepping, and single or range date selection powered by React Aria and StyleX.

Preview

Interactive

Appointment date, September 2026

S	M	T	W	T	F	S
30	31	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	1	2	3

Properties

Mode

Disabled

Read Only

Show Selected Date

Live Code Snippet

import { Calendar } from '@moul-dev/ui';
import { useState } from 'react';

export default function Example() {
  const [date, setDate] = useState(null);

  return (
    <div className="flex flex-col items-center gap-3">
      <Calendar
        aria-label="Appointment date"
        value={date}
        onChange={setDate}
      />
      {date && (
        <p className="text-xs text-neutral-500">
          Selected: {date.toString()}
        </p>
      )}
    </div>
  );
}

Installation

import { Calendar, RangeCalendar } from '@moul-dev/ui';

Basic Calendar

<Calendar aria-label="Appointment date" />

Range Calendar

Use RangeCalendar when selecting a range between a start date and an end date:

<RangeCalendar aria-label="Trip booking dates" />

Controlled State

You can control the calendar's value using internationalized dates:

import { useState } from 'react';
import { Calendar } from '@moul-dev/ui';

export function Example() {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <div className="flex flex-col gap-3 items-center">
      <Calendar
        value={selectedDate}
        onChange={setSelectedDate}
        aria-label="Event date"
      />
      {selectedDate && (
        <p className="text-xs text-neutral-500">
          Selected: {selectedDate.toString()}
        </p>
      )}
    </div>
  );
}

Props

Calendar

Prop	Type	Default	Description
`value`	`DateValue`	—	Controlled date value
`defaultValue`	`DateValue`	—	Default date value
`onChange`	`(value: DateValue) => void`	—	Handler called when date selection changes
`minValue`	`DateValue`	—	Minimum selectable date
`maxValue`	`DateValue`	—	Maximum selectable date
`isDisabled`	`boolean`	`false`	Whether the calendar is disabled
`isReadOnly`	`boolean`	`false`	Whether the calendar is read-only
`isDateUnavailable`	`(date: DateValue) => boolean`	—	Callback to mark specific dates as unavailable

Calendar

Appointment date, September 2026

Properties

On this page