1<Calendar />

Usage

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

Calendar Props

RangePicker Props

DatePicker Props

Examples

Calendar

Choose between different variants to convey different meanings or importance levels. Default variant is accent.

1<Calendar numberOfMonths={2} />

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        <BellIcon style={{ width: "8px", height: "8px" }} />
14        <Text style={{ fontSize: "8px" }} color="secondary">
15          25%
16        </Text>
17      </Flex>
18    ),
19  }}
20/>

Range Picker

The Range Picker component allows selecting a date range with the following behaviors:

1. When selecting two different dates:

   • The UI will show the exact selected dates
   • The callback will return the start and end date as selected

   1// Example: If user selects April 1st and April 10th, 2025
   2// UI will show: April 1st, 2025 - April 10th, 2025
   3// Callback will return:
   4{
   5  "from": "2025-03-31T18:30:00.000Z",
   6  "to": "2025-04-09T18:30:00.000Z"
   7}

2. When clicking the same date twice:

   • The UI will show the same date for both start and end
   • The callback will return the start and end date as selected

   1// Example: If user clicks April 1st, 2025 twice
   2// UI will show: April 1st, 2025 - April 1st, 2025
   3// Callback will return:
   4{
   5  "from": "2025-03-31T18:30:00.000Z",
   6  "to": "2025-03-31T18:30:00.000Z"
   7}

1<RangePicker />

Date Picker

Badges can include an icon to provide additional visual context. By default there is no icon.

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