# xpl-calendar

Calendars allow users to view and select dates.  Use XPL-Calendar when date picking is needed on a page or in a in a container.
If a calendar is needed within a form, use [XPL-Datepicker](https://apollo.xplordocs.com/?path=/story/components-input--datepicker).

<!-- Auto Generated Below -->


## Properties

| Property      | Attribute      | Description                                                                                                                     | Type                  | Default     |
| ------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `dateFormat`  | `date-format`  | Format of the date displayed in the calendar. Default is 'Y-m-d'.                                                               | `string`              | `'Y-m-d'`   |
| `defaultDate` | `default-date` | Default date to be displayed when the calendar is first loaded.                                                                 | `string`              | `undefined` |
| `inputId`     | `input-id`     | Unique identifier for the calendar element.                                                                                     | `string`              | `uuid()`    |
| `max`         | `max`          | Maximum selectable date in the calendar.                                                                                        | `number \| string`    | `undefined` |
| `min`         | `min`          | Minimum selectable date in the calendar.                                                                                        | `number \| string`    | `undefined` |
| `mode`        | `mode`         | Mode of the calendar, either 'single' for single date selection or 'range' for selecting a range of dates. Default is 'single'. | `"range" \| "single"` | `'single'`  |


## Events

| Event          | Description                           | Type                              |
| -------------- | ------------------------------------- | --------------------------------- |
| `dateSelected` | Event emitted when a date is selected | `CustomEvent<string \| string[]>` |


## Methods

### `setDate(date: string | string[]) => Promise<void>`

Method to update the calendar date from external input

#### Parameters

| Name   | Type                 | Description |
| ------ | -------------------- | ----------- |
| `date` | `string \| string[]` |             |

#### Returns

Type: `Promise<void>`




----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*