Can I customize the colors of the calendar in my booking page?

You can customize all the colors in the calendar shown to customers.

1. Go to Settings>Colors and styles

2. Input the following rules in the section Custom CSS (Advanced)

/* available days */
.bookeocss #cb_fixed_calendar-container .calendar tbody .jscalendar_available {
background-color: green;
border-color: green;
}
.bookeocss .cb_bhf_legendAvailable {
background-color: green;
}

/* unavailable days */
.bookeocss #cb_fixed_calendar-container .calendar tbody .jscalendar_unavailable {
background-color: #CCCCCC;
border-color: #CCCCCC;
}
.bookeocss .cb_bhf_legendUnavailable {
background-color: #CCCCCC;
}

/* selected date */
.bookeocss #cb_fixed_calendar-container .calendar tbody td.selected {
background-color: #FFFF66;
border-color: #FFFF66;
}
.bookeocss .cb_bhf_legendBooking {
background-color: #FFFF66;
}

/* mouseover date */
.bookeocss #cb_fixed_calendar-container .calendar tbody td.hilite {
background-color: yellow;
border-color: yellow;
}


3. Save


These are only sample colors. Colors can be expressed by standard color name (example: yellow ; see a list of possible color names here: http://www.w3schools.com/cssref/css_colornames.asp ), or code (example: #FF6666 ; see http://www.w3schools.com/tags/ref_colorpicker.asp )

 

CSS rules do not apply to the mobile interface. The mobile interface is optimized and tested for all major mobile platforms, and for this reason customization is not supported. 

 ​