Calendar

Copy Markdown

<Calendar />

Usage

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

Calendar Props

RangePicker Props

The RangePicker supports customizing the popover behavior using the popoverProps prop.

DatePicker Props

The DatePicker supports customizing the popover behavior using the popoverProps prop.

Examples

Calendar

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

<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.

<Calendar
  numberOfMonths={2}
  dateInfo={{
    [dayjs().format("DD-MM-YYYY")]: (
      <Flex
        align="center"
        gap={2}
        style={{
          fontSize: "8px",
          color: "var(--rs-color-foreground-base-secondary)",
        }}
      >
        <BellIcon style={{ width: "8px", height: "8px" }} />
        <Text style={{ fontSize: "8px" }} color="secondary">
          25%
        </Text>
      </Flex>
    ),
  }}
/>

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

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

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

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

<RangePicker />

Date Picker

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

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