Calendar

<Calendar />

Usage

The Calendar components provide flexible date selection functionality with support for single dates, date ranges, and custom triggers.

import { Calendar, RangePicker, DatePicker } from '@raystack/apsara'
 
// Basic Calendar
 
<Calendar numberOfMonths={2} />
 
// Range Picker with custom trigger
 
<RangePicker>
  {({ startDate, endDate }) => (
    <button>
      {startDate} - {endDate}
    </button>
  )}
</RangePicker>
 
// Date Picker with custom trigger
 
<DatePicker>
  {({ selectedDate }) => (
    <button>
      Selected: {selectedDate}
    </button>
  )}
</DatePicker>

Calendar Props

Prop	Type	Default
`numberOfMonths`	`number`	-
`captionLayout`	`string`	-
`loadingData`	`boolean`	-
`dateInfo`	`Record<string, unknown>`	-
`showOutsideDays`	`boolean`	-
`className`	`string`	-
`timeZone`	`string`	-

Range Picker Props

Prop	Type	Default
`dateFormat`	`string`	`"DD/MM/YYYY"`
`onSelect`	`(range: { from: Date; to: Date; }) => void`	-
`value`	`{ from: Date; to: Date; }`	-
`calendarProps`	`CalendarProps`	-
`inputFieldsProps`	`{ startDate?: InputFieldProps \| undefined; endDate?: InputFieldProps \| undefined; }`	-
`children`	`ReactNode`	-
`showCalendarIcon`	`boolean`	`true`
`footer`	`ReactNode`	-
`timeZone`	`string`	-

Date Picker Props

Prop	Type	Default
`dateFormat`	`string`	`"DD/MM/YYYY"`
`inputFieldProps`	`InputFieldProps`	-
`value`	`Date`	-
`onSelect`	`(date: Date) => void`	-
`calendarProps`	`CalendarProps`	-
`children`	`ReactNode`	-
`showCalendarIcon`	`boolean`	`true`
`timeZone`	`string`	-

Examples

Calendar

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

<Calendar numberOfMonths={2} />

Range Picker

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

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" }
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" }} />

Calendar

On this page