---
title: Overall Availability Calendar
slug: overall-availability-calendar
createdAt: 2020-11-26T14:24:44.000Z
---

:::Iframe{code="<multi-availability-calendar&#xA;        hotel=&#x22;6cc8059f601a451ca4ae0cf479d186a6&#x22;&#xA;        visible-dates=&#x22;365&#x22;&#xA;        locale=&#x22;de&#x22;&#xA;        mode=&#x22;RoomType&#x22;&#xA;        unavailable-color=&#x22;#eccccd&#x22;&#xA;        available-color=&#x22;#d2e6c4&#x22;&#xA;        left-col-width=&#x22;150px&#x22;&#xA;/>" iframeHeight="300"}

:::

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

<multi-availability-calendar
        hotel="WIDGET_HOTEL_ID"
        visible-dates="365"
        locale="de"
        mode="RoomType"
        unavailable-color="#eccccd"
        available-color="#d2e6c4"
        left-col-width="150px"
/>
```

## Options

| Attribute         | Description                                                                                                             | Default      |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------- | ------------ |
| hotel             | Hotel ID (required)                                                                                                     |              |
| visible-dates     | number of future dates (including today) which should be shown                                                          | 365          |
| mode              | one of 'Room' or 'RoomType'<br />'Room' shows one line for each room<br />'RoomType' shows one oline for each room type |              |
| left-col-width    | width of left column                                                                                                    | 180px        |
| unavailable-color | color for unavailable dates                                                                                             | #eccccd      |
| available-color   | color for available dates                                                                                               | #d2e6c4      |
| locale            | 'de' or 'en'                                                                                                            | 'de'         |
| env               | on off 'development', 'staging', 'production'                                                                           | 'production' |