# gds-calendar

**Class**: `GdsCalendar`

**Tag**: `<gds-calendar>`


## Properties

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `Date \| undefined` | `-` | The currently selected date. |
| `min` | `any` | `-` | The minimum date that can be selected. |
| `max` | `any` | `-` | The maximum date that can be selected. |
| `focusedDate` | `any` | `-` | The date that is currently focused. |
| `disabledWeekends` | `boolean` | `-` | Whether to disable weekends or not. |
| `disabledDates` | `Date[] \| undefined` | `-` | An array of dates that should be disabled in the calendar. |
| `focusedMonth` | `any` | `-` | The month that is currently focused. |
| `focusedYear` | `any` | `-` | The year that is currently focused. |
| `size` | `'small' \| 'large'` | `-` | Sets the size of the grid. Defaults to "large". |
| `showWeekNumbers` | `boolean` | `-` | Whether to show week numbers or not. |
| `hideExtraneousDays` | `boolean` | `-` | Whether to hide extraneous days (that fall ouside of current month) |
| `hideDayNames` | `boolean` | `-` | Whether to hide the day names shown above the calendar. |
| `customizedDates` | `CustomizedDate[] \| undefined` | `-` | An array of `CustomizedDate` objects that can be used customize the appearance of dates. This can only be set through the property, not through an attribute. |
| `label` | `string \| undefined` | `-` | The accessible label for the calendar. |
| `dateLabelTemplate` | `any` | `-` | A template function to customize the accessible date label. |
| `syncFirstRender` | `boolean` | `-` | Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM is projected.  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the element needs to be measured synchronously after being added to the DOM. |


## Events

| Name | Type | Description |
|------|------|-------------|
| `change` | `Event` | Fired when a date is selected. |
| `gds-date-focused` | `CustomEvent<any>` | Fired when focus is changed. Can be cancelled using `event.preventDefault()`. |


## Methods

### `getDateCell(dayNumber: number): void`

Returns the date cell element for the given day number.

**Parameters:**

- `dayNumber`: `number`

### `focus(): void`