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

Range Picker Props

Date Picker Props

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:

1. When selecting two different dates:

   • The UI will show the exact selected dates
   • The callback will return the start date as selected and end date as one day after

   // Example: If user selects April 1st and April 10th, 2025
   // UI will show: April 1st, 2025 - April 10th, 2025
   // Callback will return:
   {
     "from": "2025-04-01T18:30:00.000Z",
     "to": "2025-04-11T18:30:00.000Z"  // One day after selected end date
   }

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 date as selected and end date as one day after

   // Example: If user clicks April 1st, 2025 twice
   // UI will show: April 1st, 2025 - April 1st, 2025
   // Callback will return:
   {
     "from": "2025-04-01T18:30:00.000Z",
     "to": "2025-04-02T18:30:00.000Z"  // One day after selected date
   }

<RangePicker />

Date Picker

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

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