Help Centre

How do I choose my customised calendar colours?

Updated on

Know your website colour scheme

In the example below, the colour scheme of the main website is teal and white. This colour scheme has been incorporated into the calendar design.

The booked dates are pale grey - it's not drawing attention to those dates but you can clearly see they are not available.

What to avoid doing when creating your calendars

Avoid using too many and clashing colours. The best concept will ensure that your available days are the most prominent area, drawing the guest's attention to it.
Below is a bad example of too many colours, the booked dates dominating and the available dates literally fading into the background.
The guest is more likely to try and book dates no longer available, rather then finding their preferred dates and actually booking their stay.

Calendar types

There are three different ways to choose the colours and set up your calendar.

Predefined

There are six predefined calendars, four Basic and two Channel specific ones.
If you are listing your properties on Love to Escape or Independent Cottages, you can use their calendar design for a seamless design integration.

Please note:
When using either of the Channel calendar styles any booking received via the calendar will show the particular channel as the source of the booking.

Images: How do the predefined calendars look?

Basic - Green

Basic - Dark

Basic - Teal

Basic - Accessible

Customised

This option allows you to style the calendar using custom colours.

Tip:
If you like one of the channel designs, but don't want to use the predefined style, you can use the customising options here to recreate the same design.

Tip:
Using too many calendar colours can make a calendar look busy and unappealing.

Booked dates should simply display as a muted colour so it doesn't distract the guest from the actual availability, e.g. grey or pale brand colour. You want the available days colour to stand out.

Advanced

This option is for experienced users and web developers. It provides the possibility to import and/or use JSON or CSS for the styling of the calendars.

You can easily preview the calendar style by clicking Calendar live preview.

Once you're happy with your calendar style click Save calendar.

Previous Article Can I add custom text above my calendar?
Next Article Available languages to view the calendar & booking cart in