Availability Calendar

The legacy availability calendar is a widget that shows your availability on your website and opens your booking page. It is deprecated: create new widgets with the widget designer in Settings > Booking Engine > Booking Widgets if you can. See How to use Widgets.

Table of Contents

1. Create a legacy availability calendar
2. Customisation settings
3. Change the first day of the week
4. Adjust the size and style with CSS
5. Show several calendars on the same page

Create a legacy availability calendar

Steps:

1. Go to Settings > Booking Engine > Booking Widgets > Booking Button and click the link at the bottom.
2. Use the selector to choose whether the calendar opens your booking page with all properties (if you have more than one), one property or one room.
3. Set the colours and other settings (see Customisation settings) and click Save.
4. Click Get Code.
5. Paste the code into your website's source code where the calendar should display.

Expected result: the calendar shows on your website. Your settings are stored, so to change the colours later, change them here: your website updates automatically.

Customisation settings

Change the first day of the week

Add this script to your page anywhere before the calendar code. Use a number from 0 to 7, where 0 is Sunday and 1 is Monday. Example for Sunday:

<script>var beds24CalStartDay=0;</script>

Adjust the size and style with CSS

If the widget doesn't fit its space, make the buttons smaller by overriding their padding. Add this to your website's CSS:

.beds24availcal input {padding:5px;}

Or add it to the HEAD section of your page:

<style>
.beds24availcal input {padding:5px;}
</style>

Change 5px to a value that fits your page.

To change the style, add CSS to your website's style sheet. For example, to change the font size:

.beds24availcal td{
font-size: 20px !important;
}

Show several calendars on the same page

Required skills: HTML and JavaScript.

The calendars have a clone function, so you can show several months at once.

Steps:

1. Start with a normal availability calendar widget from the widgets menu, for example:

   <div style="width:auto; padding:0; margin:0;"><form id='ap00002048' style='display:inline;' method='GET' target='_blank' action='https://beds24.com/booking.php'><script type='text/javascript' src='https://beds24.com/availcal/cal.jsp?propid=2048&width=200'></script><input type='hidden' name='propid' value='2048'><input type='hidden' name='fdate' value=''><input type='hidden' name='referer' value='Calendar'><input id='beds24sub1411413312' type='submit' STYLE='width:200px' value='Check Availability' title='Click to check availability and make a reservation online'><script type='text/javascript'>document.getElementById('beds24sub1411413312').style.display='none';</script></form></div>

2. Make a clone of the calendar:
   • The form ID must be unique. This example adds a letter.
   • The cloned calendar is in an array. Pass the ID of the form to connect it to.
   • The array name is cb00<propid>[] for property calendars and ca00<roomid> for room calendars.
   • The input button and the script that hides it are removed.

   <div style="width:auto; padding:0; margin:0;"><form id='ap00002048b' style='display:inline;' method='GET' target='_blank' action='https://beds24.com/booking.php'><script>cb00002048[1]=cb00002048[0].clone('ap00002048b');</script><input type='hidden' name='propid' value='2048'><input type='hidden' name='fdate' value=''><input type='hidden' name='referer' value='Calendar'></form></div>

3. Make another clone:

   <div style="width:auto; padding:0; margin:0;"><form id='ap00002048c' style='display:inline;' method='GET' target='_blank' action='https://beds24.com/booking.php'><script>cb00002048[2]=cb00002048[0].clone('ap00002048c');</script><input type='hidden' name='propid' value='2048'><input type='hidden' name='fdate' value=''><input type='hidden' name='referer' value='Calendar'></form></div>

4. Add as many more clones as you want, for example:

   <div style="width:auto; padding:0; margin:0;"><form id='ap00002048d' style='display:inline;' method='GET' target='_blank' action='https://beds24.com/booking.php'><script>cb00002048[3]=cb00002048[0].clone('ap00002048d');</script><input type='hidden' name='propid' value='2048'><input type='hidden' name='fdate' value=''><input type='hidden' name='referer' value='Calendar'></form></div>

5. After the cloned calendars, add a script that moves each clone forward one month at a time:

   <script>
   cb00002048[1].nextMonth();
   cb00002048[2].nextMonth();
   cb00002048[2].nextMonth();
   cb00002048[3].nextMonth();
   cb00002048[3].nextMonth();
   cb00002048[3].nextMonth();
   </script>

Expected result: the page shows four calendars for consecutive months.

Related Articles

• How to use Widgets
• How to use Legacy Widgets
• Booking Box