Difference between revisions of "Availability Calendar"

From Beds24 Wiki
Jump to navigation Jump to search
m (updated 'olour' and 'color' to colour, webbsites to websites)
Line 8: Line 8:
  
 
You can customise defining:  
 
You can customise defining:  
*text color
+
*text colour
*text not in month color -olour of dates that are not in the month on the availability calendar widget
+
*text not in month colour -colour of dates that are not in the month on the availability calendar widget
*background color - if you dont want a fading effect, set both colours the same
+
*background colour - if you dont want a fading effect, set both colours the same
 
*available dates background color
 
*available dates background color
*avialabile dates hover colour -  mouse hover over background colour of available nights
+
*available dates hover colour -  mouse hover over background colour of available nights
 
*unavailable dates background color
 
*unavailable dates background color
*referrer text - If you use widgets on different webssites you may use different referrers on each. This text will be recorded with any bookings originating from this widget allowing tracking of booking sources.  
+
*referrer text - If you use widgets on different websites you may use different referrers 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.
 
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.

Revision as of 08:02, 22 July 2016

This page is about the menu SETTINGS ->BOOKING PAGE-> BOOKING WIDGETS -> AVAILABILITY CALENDAR

This widget designer lets you create your own availability calendar widget.

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.


You can customise defining:

  • text colour
  • text not in month colour -colour of dates that are not in the month on the availability calendar widget
  • background colour - if you dont want a fading effect, set both colours the same
  • available dates background color
  • available dates hover colour - mouse hover over background colour of available nights
  • unavailable dates background color
  • referrer text - If you use widgets on different websites you may use different referrers 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>


You can change the settings and click on SAVE. Click on GET CODE. Copy the code to where you want to display the widget in the websites source code. The settings will be stored. Once you have insatlled the widget and want to change colours you only need it to do here and the changes will appear automatically on your website.


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:

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