Calendar

<Calendar />

Usage

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

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

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

<Calendar numberOfMonths={2} />

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

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

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