How to avoid whitespace and scrollbars in your booking calendar

If you are using Booking Calendar 2.0 as the booking system for your bed & breakfast, rental business or tour company, we have great news for you!

We have added support for automatic adjustment of the Booking Calendar height. By using automatic height adjustment, you will eliminate empty spaces below the Booking Calendar as well as the scroll bar on the right side of the Booking Calendar.

As an added benefit, the Booking Calendar will automatically scroll to the top whenever the customer clicks to a new page, thereby making it easy for the customer to see what to do next and how to complete the booking without excessive scrolling.

This feature uses the latest HTML5 standards. Please note that it may not work correctly with older browsers, and it cannot be used with pop-up windows such as PayPal payments. We expect that browsers eventually will support this, but it may be months or even years before the majority of all browsers will support this feature. If you accept PayPal payments, we do not recommend that you use this feature.

The following steps will enable automatic resizing on your Booking Calendar. Before you begin, we recommend you make a copy of the page containing the Booking Calendar, so you can revert back to it if need be.

Step 1. Ensure that your web page is HTML5 compliant

To be able to use HTML5 in all browsers, your webpage must start with the HTML5 doctype tag. It looks like this:

 <!DOCType html>

Step 2. Add the Booking Calendar utility script

To add the Booking Calendar utility script, include the following line anywhere above the Booking Calendar:

For WebReserv.com:

https://secure.webreserv.com/assets/lib/wrs/bookingcalendarutil.js

Step 3. Update the IFRAME code

Review the code for your IFRAME. It must contain the following attributes. If one or more attributes are missing, you’ll need to add them.

id=”bookingcalendar” onload=”bccu.onload();” sandbox=”allow-scripts allow-forms allow-same-origin allow-popups”

Below you can see what the final IFRAME may look like with all the necessary attributes added. Your IFRAME will look different as some of the parameters are dependent on your business, but you’ll see the three attributes here: