---
title: Availability Calendar
slug: availability-calendar
createdAt: 2020-11-26T14:24:42.000Z
---

:::Iframe{code="<availability-calendar hotel=c8bd115893a7c66bd7c11808834ae830 room-type=e11250be-20f4-40d0-8594-c67df7b57d65 months=3 max-months=12 locale=de unavailable-color=#eccccd available-color=#d2e6c4>" iframeHeight="350"}

:::

```html
<script src="https://hmwidgets.web.app/shadow/js/app.js" type="application/javascript"></script>

<availability-calendar
        hotel="WIDGET_HOTEL_ID"
        room-type="ROOM_TYPE_ID"
        months="3"
        max-months="12"
        locale="de"
        unavailable-color="#eccccd"
        available-color="#d2e6c4"
/>
```

## Options

| Attribute         | Description                                                                 | Default      |
| ----------------- | --------------------------------------------------------------------------- | ------------ |
| hotel             | Hotel ID (required)                                                         |              |
| room-type         | Room Type ID<br />if set the availability for this room type will be shown  |              |
| room-number       | Room Number<br />if set the availability for this room number will be shown |              |
| months            | number of months visible by default                                         | 3            |
| max-months        | maximum number of months to display<br />(recommended: 12)                  | 36           |
| unavailable-color | color for unavailable dates                                                 | #eccccd      |
| available-color   | color for available dates                                                   | #d2e6c4      |
| past-color        | color for dates in the past                                                 | #ced1d2      |
| locale            | 'de' or 'en'                                                                | 'de'         |
| months-margin     | in px                                                                       | 70           |
| env               | on off 'development', 'staging', 'production'                               | 'production' |