CalendarA calendar component for selecting dates and date ranges.

January 2025

February 2025

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

Installation

Install the component from your command line.

npm install @raystack/apsara

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

The Calendar component accepts the following props:

numberOfMonths: Number of months to display
captionLayout: Layout for the month caption (e.g., "dropdown")
loadingData: Boolean to show loading state
dateInfo: Object containing date-specific information like icons and text
showOutsideDays: Boolean to show days from previous/next months
className: Additional CSS class names

RangePicker Props

The RangePicker component accepts the following props:

dateFormat: Format for displaying the date (e.g., "DD/MM/YYYY")
onSelect: Callback function when date range is selected
value: Initial date range value
calendarProps: Props for customizing the calendar
textFieldProps: Props for customizing the text field
children: Render prop for custom trigger
showCalendarIcon: Boolean to show/hide calendar icon (default: true)

DatePicker Props

The DatePicker component accepts the following props:

textFieldProps: Props for customizing the text field
children: Render prop for custom trigger
showCalendarIcon: Boolean to show/hide calendar icon (default: true)

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa