Help CentreGetting started Website integrationWebsite calendars : How do I create one?

Website calendars : How do I create one?

In order to allow your guests to book directly via your website, you need to specify how you wish your calendar to appear, and generate the code to embed on your website. You can tailor the design/colours of the calendar to match your website closely, or else use one of our stylish pre-defined styles.

1. Go to Admin > Website integration > Calendar wizard.

2. Enter a calendar name e.g." <your company name> calendar "and choose the site ID that should be associated with this calendar.

If you have more than one website, you can create website specific calendars for each individual site ID.

3. Enter your calendar URL (this is the website where you will embed your calendar) and then choose your "Calendar type". This URL is used when the booking process is abandoned at any stage by the guest, it will revert them back to this calendar URL.

Predefined - this means you can choose from our list of standard colours

Customised - this is where you can choose your own calendar colours.

Advanced - this allows you to use json / CSS to style you calendar.

Calendar types


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

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

Images: How do the predefinded calendars look?

Basic - Green

Basic - Dark

Basic - Teal

Basic - Accessible


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 option 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 become distracting to the user eg. grey or pale brand colour. You want the available days colour to stand out.


This option is for experinced useds and web developers. It provides the possibility to import, use JSON or CSS for the styling of the calendars.

4. Easily preview the calendar style by clicking "Calendar live preview"

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

Generating the code to embed on your website

6. Click Widget code and select your calendar style from the Calendar key drop down:

7. Choose your Desktop behaviour. This is how you would like your calendar to display when viewing your calendar on a desktop view. You can see previews of each version underneath:

8. Tick "I will use this snippet to show single property only" if this calendar you're creating is for a single property. If you would like this calendar to show more than one property either in a grid view or from the property drop down, leave this option unticked.

9. Your widget snippet is generated underneath. Choose to send this code to your web developer or simply copy this to your clipboard:

10. Your web developer can easily copy and paste this to your website. 

Your website developer should avoid embedding the code in an iframe if possible, but this may be required in order to display them on some web hosting platforms. Also ensure that the calendar is not embedded in too narrow a space on your website. This will make it appear 'squashed' and prevent the dates from displaying clearly.



How can we make this page better for you?

E-Mail me when someone replies to this comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.