Availability Calendar

Want to display the availability of your property in a neat little calendar? This is the widget for you! This calendar widget displays the live availability of your chosen property which automatically updates without reloading the page.

Example Setup

To install the availability calendar widget into your webpage, simply copy the code below into your webpage where you would like the availability calendars to be displayed. Replace the data-property-id attribute value with the id number of the property you want to display the availability of.

Code

<!--
Where the availability calendar will be placed
(Replace property id with your property id)
-->
<div class="travelduck availability" data-property-id="1"></div>


<!-- Load TravelDuck libraries (place at end of document) -->
<script>
  (function(src) {
    var td = document.createElement("script");
    td.type="text/javascript";td.async=1;td.src=src;
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(td,s);
  })("https://travelduck.co/libraries/widgets/loader.js");
</script>

Result

Options

You can customise your availability calendars using the options below