> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/components/data/calendar.md).

# Calendar

This component adds a calendar on the page and provides ability to set you custom date item renderer for every date in the month. This functionality empowers developers to tailor the appearance and behaviour of date selections according to specific project requirements.

```tsx
import { Calendar } from 'altrone-ui';

<Calendar month={new Date()} />
```

## Customize the calendar

This component allows you to customize calendar elements the way you want. The component provides DateComponent prop. This prop expects your component to render instead of the standard date component.&#x20;

The following data will be passed to your passed component, based on which you can render.

### <mark style="color:blue;">CalendarRenderDateProps</mark>

| Property                | Type                   | Description                                                                   |
| ----------------------- | ---------------------- | ----------------------------------------------------------------------------- |
| **`currentDate`**       | `Date`                 | Rendered date                                                                 |
| **`weekDay`**           | `number`               | Index of weekday                                                              |
| **`fromAnotherMonth`**  | `boolean`              | This date is not from current month                                           |
| **`today`**             | `boolean`              | Today's date                                                                  |
| **`selected`**          | `boolean`              | True if this date is selected                                                 |
| **`disabled`**          | `boolean`              | True if this date is disabled                                                 |
| **`cursorHighlighted`** | `boolean`              | True, when the cursor is over this date. Can be used to work with date ranges |
| **`onSelect`**          | `(date: Date) => void` | Callback to change selected date                                              |

## Properties

| Property                                           | Type                                                                | Description                                                         |
| -------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- |
| **`month`**<mark style="color:red;">**`*`**</mark> | `Date`                                                              | Current month                                                       |
| **`selectedDates`**                                | `Date[]`                                                            | List of selected dates                                              |
| **`cursorDate`**                                   | `Date`                                                              | Date over which the cursor is located. Can be used for date ranges. |
| **`onDateChange`**                                 | `(date: Date) => void`                                              | Callback is called when user clicks on the date                     |
| **`DateComponent`**                                | `React.FC<`[`CalendarRenderDateProps`](#calendarrenderdateprops)`>` | Custom Date component                                               |
| **`disabled`**                                     | `boolean`                                                           | Makes calendar as read-only                                         |
| **`className`**                                    | `string`                                                            | Custom CSS class                                                    |

## History

* **`Altrone 2.1`:** initial release