Calendar - Hotel Bookings

Image of the calendar module online

This is the ‘hotel bookings' variation of the calendar (or availability checker) module. This module connects with a Google Calendar and displays days on which bookings have been made according to your calendar. Any event or booking on any given date will take up the entire day, as this module is specifically designed for booking properties like rooms, tents, etc. Lastly, you may only use Google Calendars that you own. A calendar that has been shared with your Google Account will not work.

Enabling / Disabling

Like all modules, this module can be enabled / disabled. Please see the corresponding section of the documentation to find out more about this functionality.

Header Text

Image of the header text

This is the header text in the Calendar - Hotel Bookings module. Here it is online:

Image of the Calendar - Hotel Bookings module header text online

Body Text

Image of the body text

This is a rich body text input without a character limit.

Here it is in the module:

Image of the calendar - hotel bookings module body text online

This is a rich body text input without a character limit.

Tip

It is still a good idea to limit the amount of text somewhat, as the design of the site may stretch too far in trying to accommodate a large amount of text

Colours

The Calendar - Hotel Bookings module allows you to change the background colour and text colour of the module.

Image of the standard colours

(Re-)Connect Calendar

Image of the calendar - hotel bookings module connect calendar option in website builder

Before you can use your calendar on your website, you need to connect it by logging into your Google account and giving the website builder permission to pull your calendar data. First, click on the link saying ‘Open Connection Window', which opens a new tab or window and leads to the following steps:

  • Logging in with Google:

First you need to login, like below:

Image of the calendar - hotel bookings module, showing Google's login screen

  • Providing permission:

Next, Google will ask for permissions. Please make sure to mark each checkbox as checked, as these are the required permissions for the website builder to get your calendar data. After this, you will be taken back to the website builder.

Image of the calendar - hotel bookings module, showing the permissions screen

Property Type

Image of the calendar - hotel bookings module, showing the property type option in the cms

This is a free-text field allowing you to name the kind of property you offer. For example, a bed & breakfast might offer rooms, while a campsite may offer tents. This field is limited to 20 characters, to ensure design consistency.

Image of the calendar - hotel bookings module, showing the property type online

Calendars

Image of the calendar - hotel bookings module, showing the calendars in website builder

Here you can add, re-order and remove the calendars you would like to show. In the CMS, that adds the calendars selected:

Image of the calendar - hotel bookings module, showing the calendars online

  • Calendar Selection:

Image of the calendar - hotel bookings module, showing the calendar selection in website builder

This is where you select the calendar to display.

  • Calendar Name:

Image of the calendar - hotel bookings module, showing the calendar name in website builder

Here you can give your calendar a name.

  • Calendar Link:

Image of the calendar - hotel bookings module, showing the calendar link in website builder

If you add a URL to a calendar, it automatically becomes underlined and clickable on your website.

Check-in Days

Image of the calendar - hotel bookings module, showing the checkin days in website builder

Here you may define a day for checkin times. If you do not choose one, the element will disappear from your module. Each selected day will be highlighted with a customised colour.

Image of the calendar - hotel bookings module, showing the checkin days online

Unavailable Dates

Image of the calendar - hotel bookings module, showing the unavailable dates in website builder

Here you may define a date range for when your properties are not available. The selected date range will be highlighted with a customised colour.

Image of the calendar - hotel bookings module, showing the unavailable dates online

Calendar Grid Colours

Image of the calendar - hotel bookings module, showing the colour options in website builder Image of the calendar - hotel bookings module, showing the colour options in website builder Image of the calendar - hotel bookings module, showing the colour options in website builder

There are 14 customisable colour options available for the calendar module.

  • Sidebar Background: Image of the calendar - hotel bookings module, showing the sidebar background colour online

  • Sidebar Font Colour: Image of the calendar - hotel bookings module, showing the sidebar font colour online

  • Grid Line Colour: Image of the calendar - hotel bookings module, showing the grid line colour online

  • Month Bar Background: Image of the calendar - hotel bookings module, showing the month bar background colour online

  • Month Bar Font: Image of the calendar - hotel bookings module, showing the month bar font colour online

  • Day Bar Background: Image of the calendar - hotel bookings module, showing the day bar background colour online

  • Day Bar Font: Image of the calendar - hotel bookings module, showing the day bar font colour online

  • Date Bar Background: Image of the calendar - hotel bookings module, showing the date bar background colour online

  • Date Bar Font: Image of the calendar - hotel bookings module, showing the date bar font colour online

  • Booked Colour: Image of the calendar - hotel bookings module, showing the booked colour online

  • Available Colour: Image of the calendar - hotel bookings module, showing the available colour online

  • Weekend Colour: Image of the calendar - hotel bookings module, showing the weekend colour online

  • Check-in Colour: Image of the calendar - hotel bookings module, showing the check-in colour online

  • Unavailable Colour: Image of the calendar - hotel bookings module, showing the unavailable colour online

Lower Body Text

Image of the calendar - hotel bookings module, showing the lower body text in website builder

The lower body text can be used to add information to the module if desired.

Image of the calendar - hotel bookings module, showing the lower body text online

Button

Please refer to the CTA / Button section for more info about the button.

Tip

Please do not forget to hit one of the save buttons, to make sure the changes you have made are actually saved. Why not keep a window with your preview open, to see the changes in realtime?