Calendar

<Calendar numberOfMonths={2} />

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

Range Picker Props

Prop	Type	Default
`dateFormat`	`string`	-
`onSelect`	`(range: { start: Date; end: Date; }) => void`	-
`value`	`{ start: Date; end: Date; }`	-
`calendarProps`	`CalendarProps`	-
`textFieldProps`	`Record<string, unknown>`	-
`children`	`ReactNode`	-
`showCalendarIcon`	`boolean`	`true`

Date Picker Props

Prop	Type	Default
`textFieldProps`	`Record<string, unknown>`	-
`children`	`ReactNode`	-
`showCalendarIcon`	`boolean`	`true`

Examples

Calendar

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

<Calendar numberOfMonths={2} />

Range Picker

The Badge component supports three sizes to accommodate various layout requirements. Default size is small.

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

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