Availability Calendar: Difference between revisions
Jump to navigation
Jump to search
m updated 'olour' and 'color' to colour, webbsites to websites |
No edit summary |
||
| Line 6: | Line 6: | ||
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. | 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: | You can customise defining: | ||
| Line 40: | Line 41: | ||
font-size: 20px !important; | 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> | |||