> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/raystack/apsara/llms.txt
> Use this file to discover all available pages before exploring further.
# Calendar
> Calendar components for date selection including single dates and date ranges.
The Calendar component provides flexible date selection interfaces. It includes Calendar for inline display, DatePicker for single date selection, and RangePicker for selecting date ranges.
## Components
The calendar module exports three main components:
* **Calendar**: Base calendar component for inline date display and selection
* **DatePicker**: Input field with popover calendar for single date selection
* **RangePicker**: Input fields with popover calendar for date range selection
## Calendar
The base Calendar component displays a calendar interface for date selection.
### Basic usage
```jsx theme={null}
import { Calendar } from '@raystack/apsara';
function App() {
return ;
}
```
### Props
The selection mode of the calendar.
The selected date(s). Type depends on mode.
Callback fired when a date is selected.
The month to display.
Callback fired when the month changes.
The earliest month that can be displayed.
The latest month that can be displayed.
Dates to disable. Can be a boolean, specific dates, or a function.
Whether to show days outside the current month.
Whether to show tooltips on date hover.
Tooltip messages for specific dates. Keys should be in 'dd-MM-yyyy' format.
Additional info to display on dates. Can be an object or function.
Whether the calendar is in a loading state.
The timezone to use for date calculations.
Number of months to display.
Additional CSS classes to apply to the calendar.
### Single date selection
```jsx theme={null}
function SingleDateCalendar() {
const [date, setDate] = useState(new Date());
return (
);
}
```
### With tooltips and date info
```jsx theme={null}
```
## DatePicker
A date picker with an input field that opens a calendar popover.
### Basic usage
```jsx theme={null}
import { DatePicker } from '@raystack/apsara';
function App() {
return console.log(date)} />;
}
```
### Props
The selected date value.
Callback fired when a date is selected.
The format for displaying the date in the input field.
Props to pass to the underlying InputField component.
Props to pass to the underlying Calendar component.
Whether to show the calendar icon in the input field.
The timezone to use for date calculations.
Props to pass to the Popover.Content component.
Custom trigger element or render function.
### Controlled date picker
```jsx theme={null}
function ControlledDatePicker() {
const [date, setDate] = useState(new Date());
return (
);
}
```
### Custom date format
```jsx theme={null}
```
### With date restrictions
```jsx theme={null}
date.getDay() === 0 || date.getDay() === 6
}}
/>
```
### Custom trigger
```jsx theme={null}
{({ selectedDate }) => (
)}
```
## RangePicker
A date range picker with two input fields for start and end dates.
### Basic usage
```jsx theme={null}
import { RangePicker } from '@raystack/apsara';
function App() {
return console.log(range)} />;
}
```
### Props
The selected date range value with `from` and `to` properties.
The default date range for uncontrolled usage.
Callback fired when a date range is selected.
The format for displaying dates in the input fields.
Props for the start and end date input fields.
Props to pass to the underlying Calendar component.
Whether to show calendar icons in the input fields.
CSS class for the container wrapping both input fields.
Footer content to display below the calendar.
The timezone to use for date calculations.
Props to pass to the Popover.Content component.
Custom trigger element or render function.
### Controlled range picker
```jsx theme={null}
function ControlledRangePicker() {
const [range, setRange] = useState({
from: new Date(),
to: new Date()
});
return (
);
}
```
### With footer
```jsx theme={null}
handleApply()}>
Apply Range
}
/>
```
### Custom date format
```jsx theme={null}
```
### Preset ranges example
```jsx theme={null}
function RangePickerWithPresets() {
const [range, setRange] = useState({ from: new Date(), to: new Date() });
const presets = {
'Last 7 days': {
from: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
to: new Date()
},
'Last 30 days': {
from: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
to: new Date()
}
};
return (
);
}
```
## Accessibility
* All calendar components support full keyboard navigation.
* Arrow keys navigate between dates, Enter/Space to select.
* Month and year dropdowns are keyboard accessible.
* Proper ARIA labels are applied to navigation buttons.
* Screen readers announce selected dates and date ranges.
* The DatePicker input field supports manual date entry with validation.
* Focus management ensures smooth interaction between input and calendar.