WEBSITE INTEGRATIONS

Availability Calendar

2min

<availability-calendar hotel=c8bd115893a7c66bd7c11808834ae830 room-type=e11250be-20f4-40d0-8594-c67df7b57d65 months=3 max-months=12 locale=de unavailable-color=#eccccd available-color=#d2e6c4>
<availability-calendar hotel=c8bd115893a7c66bd7c11808834ae830 room-type=e11250be-20f4-40d0-8594-c67df7b57d65 months=3 max-months=12 locale=de unavailable-color=#eccccd available-color=#d2e6c4>
﻿
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"
/>
<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
if set the availability for this room type will be shown
﻿
room-number
Room Number
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
(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'
﻿

Attribute	Description	Default
hotel	Hotel ID (required)
room-type	Room Type ID if set the availability for this room type will be shown
room-number	Room Number 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 (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'

Example Form

Overall Availability Calendar