17,129
edits
Changes
Jump to navigation
Jump to search
This widget designer lets you create your own availability calendar widgetGo to {{#fas:cog}} (SETTINGS) BOOKING ENGINE > BOOKING WIDGETS > BOOKING BUTTON and click on the link at the bottom.
Our webdesigner can do .beds24availcal td{ 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 adjustments 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://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 andmake a reservation online'><script type='text/or installation 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://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://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 for want <nowiki><div style="width:auto; padding:0; margin:0;"></nowiki><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. this script which is included after the calendars are cloned increments the displayed date one month at a small feetime <script> cb00002048[1].nextMonth(); cb00002048[2].nextMonth(); cb00002048[2].nextMonth(); cb00002048[3].nextMonth(); cb00002048[3]. Just send us a message with your requirements via SUPPORT in the top menunextMonth(); cb00002048[3].nextMonth(); </script>
no edit summary
[[Category:WidgetsLegacy_Widgets]]<div class="heading">Legacy Availability Calendar</div> This page explains how to create a legacy availability calendar for your website.
<div class="warning">{{#fas:exclamation-triangle}} These widgets are depreciated. Use the widget designer in {{#fas:cog}} (SETTINGS) BOOKING ENGINE > BOOKING WIDGETS to create widgets if you can. </div>
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:
*text colorcolour*text not in month color colour -olour colour of dates that are not in the month on the availability calendar widget*background color colour - if you dont want a fading effect, set both colours the same
*available dates background color
*avialabile available dates hover colour - mouse hover over background colour of available nights
*unavailable dates background color
*referrer referer text - If you use widgets on different webssites web sites you may use different referrers referers on each. This text will be recorded with any bookings originating from this widget allowing tracking of booking sources.
If you want to change the first day of the week, for example to Sunday, add the following to your page anywhere before the calendar code. The number can be between 0 and 7 where 0=Sunday, 1=Monday etc.
<script>var beds24CalStartDay=0;</script>
If the widget does not fit into its designated place you can override the CSS padding for the buttons and make them smaller with the following CSS
.beds24availcal input {padding:5px;}
Either add the above directly to your CSS or add the following to the HEAD section of your page, if necessary change the 5px to a better value.
Code: Select all <style> .beds24availcal input {padding:5px;} </style>
If you want to change the the style you can do this adding CSS to the stylesheet of your website. For example to change the font size add:
