17,117
edits
Changes
Jump to navigation
Jump to search
no edit summary
Use the selector to define if the link should open your booking page displaying all properties (in case you have more than one), a property or a room.
== Customizsation ==
You can customise defining:
font-size: 20px !important;
}
== Multiple calendars on the same page (programming skills required) ==
The calendars have a clone function which allows showing multiple months, please see the source of this page for details
1. start with a normal availability calendar widget from the widgets menu
<nowiki><div style="width:auto; padding:0; margin:0;"></nowiki><form id='ap00002048' style='display:inline;' method='GET' target='_blank' action='https://www.beds24.com/booking.php'><script type='text/javascript' src='https://www.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, we add a letter
*the cloned calendar is in an array, pass the id of the form to connect it to.
*the array name is in the format cb00<propid>[] for property calendars and ca00<roomid> for room calendars.
*we have removed the input button and the script to hide it.
<nowiki><div style="width:auto; padding:0; margin:0;"></nowiki><form id='ap00002048b' style='display:inline;' method='GET' target='_blank' action='https://www.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
<nowiki><div style="width:auto; padding:0; margin:0;"><</nowiki>form id='ap00002048c' style='display:inline;' method='GET' target='_blank' action='https://www.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. and as many more as you want
<nowiki><div style="width:auto; padding:0; margin:0;"></nowiki><form id='ap00002048d' style='display:inline;' method='GET' target='_blank' action='https://www.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. this script which is included after the calendars are cloned increments the displayed date 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>
