# Calendar

The `Calendar` component is a date field component that allows users to enter and edit dates. It leverages the `react-day-picker` library.

### Preview

<div align="left"><figure><img src="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2FXVcZutD7Cqg1gj7Ogdij%2Fcalendar.png?alt=media&#x26;token=881d6092-c881-42ac-aaf2-3418caa27695" alt="Gravity calendar component" width="354"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { Calendar } from 'components/lib';

function MyComponent({ ...props }) {
  return (
    <Calendar />
  );
}
```

### Props

| Prop            | Description                         | Required | Value                  |
| --------------- | ----------------------------------- | -------- | ---------------------- |
| className       | custom styling                      | optional | SCSS or Tailwind       |
| classNames      | classes passed to the day picker    | optional | SCSS or Tailwind       |
| showOutsideDays | show days outside the current month | optional | boolean, default: true |

### Notes

* The `Calendar` component uses the `DayPicker` from `react-day-picker`.
* The `className` prop allows custom styling to be applied.
* The `classNames` prop allows for custom classes to be passed to the day picker.
* The `showOutsideDays` prop determines whether days outside the current month are shown.
* The `components` prop is used to customise the left and right navigation icons.
* See the [Shadcn Calendar docs](https://ui.shadcn.com/docs/components/calendar) for more information