Skip to main content
Sign in
Español Français Italiano
Menu

Booking Website Pro: Google Calendar Widget

Victor
  • Updated

Learn how to use the Google Calendar widget to display calendar information on your Booking Website Pro site.

 

Keep site visitors up-to-date at a glance by adding the Google Calendar widget to your site. It is a great way to keep visitors engaged by showing them upcoming events, bookings, workshops, seminars, and more. The widget provides a seamless integration of a public Google calendar and can be customized like any other widget.

 

Note

  • This widget enables you to display public Google calendars only. For how to set a calendar public see Google's documentation, Create & manage a public Google calendar.
  • If you have added a calendar after connecting an account, the calendar may not appear in the calendar options. To display, disconnect, and then reconnect the account.
  • The Google Calendar widget: 
    • Does not display multiday events or all-day events.
    • Is not be translated. The structure of the calendar (for instance, the month and days) will remain in the site's default language. For example, if English (US) is the default site language, the names of the month and days will be in English.
      The events that display in the calendar appear in the language set within its Google Calendar settings, regardless of the default site language. For example, if the Google Calendar account is set to Spanish, all events will be in Spanish by default. However, when the event is clicked, the content of the event pop-up is in English only.

 

Content Editor

To access the content editor, right-click the widget and select Edit Content. Or, if you are in flex mode or Editor 2.0, the option to access the content editor is available in the floating menu. Click the element to open the floating menu, then click the option for the content editor.

  1. Click Sign in with Google. After the account is connected, you will see all public Google calendars associated with that account.
  2. Select the public calendar you want to display, and the day of the week you want the calendar to start on.
  3. (Optional) By default, the time format is set based on the site language. For example, English uses a 12-hour format with AM/PM, and European languages are in a 24-hour format. If it is set to 12-hour format and you need to switch to 24-hour, enable the Use 24-hour clock toggle.
  4. To add or edit events, go directly to the Google Calendar.

 

Design Editor

To access the design editor, select Edit Design from the floating menu to open the design panel. Click the element to open the floating menu, then click the option to edit design.

  1. To customize the style of the calendar sections, click Calendar. Customize the following:
    • Header—month & icon
    • Days of the week
    • All days
    • Events
    • Today
    • Calendar direction
  2. To customize the style of the event popup that displays when you click an event in the calendar, click Event Popup. On mobile, events are marked with a dot.

 

Supported Fields

The following fields are supported in the Google Calendar widget:

  • Title
  • Description
  • Date and Time

The following fields are not supported:

  • Location
  • File

Related articles