Calendar

A calendar component for selecting dates and date ranges.
1<Calendar />

Anatomy

Import and assemble the component:

1import { Calendar, RangePicker, DatePicker } from '@raystack/apsara'
2

3<Calendar />
4

5<RangePicker />
6

7<DatePicker />

API Reference

Calendar

Renders a standalone calendar for date selection.

Prop

Type

RangePicker

The RangePicker exposes its slots — startInput, endInput, calendar, popover — through the slotProps prop.

Prop

Type

DatePicker

The DatePicker exposes its slots — input, calendar, popover — through the slotProps prop.

Prop

Type

Examples

Calendar

Layout & appearance

Number of months, dropdown nav, loading state, footer.

1<Calendar
2  numberOfMonths={2}
3  defaultMonth={new Date(2025, 5, 1)}
4  showWeekNumber={false}
5  weekStartsOn={1}
6  showOutsideDays={false}
7/>

Behavior & data

Tooltips, disabled days, timezone, controlled month navigation.

1<Calendar
2  showTooltip
3  tooltipMessages={{
4    "15-06-2026": "Holiday",
5    "20-06-2026": "Team off-site",
6  }}
7/>

The Controlled Month tab shows the month / onMonthChange API. In a real app, hold month in parent state and update it from onMonthChange: const [month, setMonth] = useState(...); <Calendar month={month} onMonthChange={setMonth} />. The demo uses a fixed date + logging callback, so the calendar stays pinned because no parent state advances on chevron clicks.

Custom date information

You can display custom components above each date using the dateInfo prop. The keys should be date strings in "dd-MM-yyyy" format, and the values are React components that will be rendered above the date number.

1<Calendar
2  numberOfMonths={2}
3  dateInfo={{
4    [dayjs().format("DD-MM-YYYY")]: (
5      <Flex
6        align="center"
7        gap={2}
8        style={{
9          fontSize: "8px",
10          color: "var(--rs-color-foreground-base-secondary)",
11        }}
12      >
13        <Info style={{ width: "8px", height: "8px" }} />
14        <Text style={{ fontSize: "8px" }} color="secondary">
15          25%

Range Picker

Selects a date range across two inputs. The grid uses a state machine that branches on the current from / to:

  • Empty — first click sets from and advances focus to the end input.
  • Only from set — clicking a later date completes the range and closes the popover; clicking an earlier date resets from.
  • Both set — clicking again restarts: the new date becomes from, to clears.

onSelect fires on every step (the shape is { from?: Date; to?: Date } — partial during interaction). Gate on range.to if you only want the completed-range event.

1<RangePicker />

Date Picker

Single-date selection with a typable input. The popover opens on focus; pressing Enter, blurring, or clicking outside commits the value and fires onSelect.

1<DatePicker slotProps={{ input: { size: "medium" } }} />

Accessibility

  • Supports keyboard navigation between dates with arrow keys
  • Uses aria-label attributes for date cells
  • Selected and disabled dates are announced to screen readers