Calendar Widgets

Development Team -

Calendar widgets can be used to display availability for your property or for your individual units on your website. This is done by inserting some JavaScript code where you want the calendar to be displayed. 

To generate the code, go to the Booking Engine section of your cloud software and then select Website Calendar Script Generator.

Now you can copy and paste the code into your website. Without making any changes to the code, the widget will appear like this: (this is an actual functioning widget that you can try out!)


The calendar widget above is for an entire property. We can make changes to how it is displayed. For example, we can show the actual availability calendar by editing the script before we copy and paste it like so:

The results of that change will look like this:

You can also use CSS to edit the look of the widget. In this next example, we will make the widget stretch horizontally across the page with a variation of the attached CSS code (see attached text file).

Have more questions? Submit a request


  • 0
    Development Team

    Each unit can have its own individual calendar widget, and that widget can be styled with CSS. The code for each unit calendar widget can be generated in RezStream Cloud. To generate the code, on the Booking Engine - Script Generator page, select the unit from the drop-down list. You will then see a line added to the script for 'Unit' with a string of characters after it. Each unit will have a different string of characters. You can use the code generated there on each corresponding unit's webpage to display the availability for that unit and have a book now button as well. 

    Edited by Development Team
  • 0
    Development Team

    Promo Code and Multiple Rate Selection:

    The widgets have to be set to 'showRates: true' even the widget w/o a calendar for the promo code field to show.

    Rates’ dropdown *only* will show on individual unit or rate plan widgets.

Please sign in to leave a comment.