How to avoid whitespace and scrollbars in your booking calendar
If you are using new Booking Calendar 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
For WebReserv.eu:
https://secure.webreserv.eu/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:
That’s it. Save your webpage and try it in your own browser. You’ll see that the browser automatically adjusts the height.
WebReserv Blog 
August 8, 2013 at 9:01 pm
Very Useful Info. Thank you!