Compatibility:

WebSite X5 Evo and Pro

If you already use Google Calendar, you surely know how useful this tool is to manage appointments, deadlines and anniversaries without missing anything. Would you like to integrate the calendars you organize your activities with on your website? Your users could check out your events, verify the availability and possibly call you to make a reservation. With the new Google Full Calendar Optional Object, you can achieve all this pretty easily. You can integrate your Google calendars in one click, customize them and keep them updated in real time. Check out the Preview page, try it out and bring your organization to the next level!


Importing the calendars

The first thing to do is creating one or more calendars with Google Calendar:

  • Access Google Calendar: a list of your calendars is displayed on the left.
  • Now place your mouse on the calendar you want to work on so the 3-dot button is displayed: click on Settings in the menu.
  • In the Integrate Calendar section, you will find the Calendar ID: select it and copy it (you can use the keyboard shortcut CTRL+C).
#tip - Warning: For you to get the ID, your calendar must be set on 'public'. If you need more information about Google Calendar, we suggest you check out the official Guide. 


  • Now start WebSite X5, open your project and add the Google Full Calendar Object on the page you want to display the calendar on.
  • Double-click on the Object you just added so to access the settings window.
  • Stay in the Contents section and click on Add:  a new calendar is added to the Calendar list.
  • Select the calendar you just added from the list and use the Title field to give it a relevant name. 
  • Paste (with the keyboard shortcut CTRL+V) the ID you previously copied from the Google Calendar in the Calendar ID field.
  • Define the Background color and the Text color which should be used to display the events for this calendar.


Repeat these steps to add all the calendars you need: with the Add and Remove buttons, you can add multiple calendars and remove those you don't need anymore. 

This makes this object very versatile. For example, if you have a gym you could add the calendar referred to the Spinning, the CrossFit and the Pilates classes. In this way, you will be able to show a complete overview of your offer showing your website users all the classes for these three courses on a single calendar, each course having a specific color.


Defining the settings

Now you can define how your calendar should be displayed on your web page:

  • Access the Settings section.
  • First set the calendar size. If you activate the Enable automatic height option, the calendar height will be based on its width on the page, according to a predetermined ratio. The page width itself depends on the Object arrangement. If this option isn't active, on the other hand, you will be able to define a fixed height in pixel. A scrollbar will be displayed if the space for displaying the whole calendar isn't enough
  • Now, according to the result you want to achieve, you can possibly activate the following Options:
    • Enable link to event details: users will be able to click on the calendar to display a card reporting the details (if available) and possibly add it to their own calendar.
    • Display event time.
    • Display non-working days: in this case, the Working hours must be active on Google Calendar (for more information, see: Set your working hours & location). 
    • Display week number.
  • Finally, define what kind of View you want to make available for the users checking out your calendar. The possible options are: Year, Month, Week, Day, Week with hours, Day with hours. If you activate the Year option, the calendar will display all the months of the year, and you will be able to decide how many columns will be displayed for each table representing months (use the Columns per month option). A button will be added to the toolbar in the calendar header for each view you activate: so the users will be able to switch from a view to the other, choosing the one that best suits their needs. With the Default View option, you set the view that needs to be displayed when the calendar is first opened. 

Defining the style

Finally, you need you can define the graphic style for your calendar, so it better integrates on your web page:

  • Access the Style section.
  • Use the Elements to be stylized list to select the element you want to work on. You can work with different options according to the element you select.
  • If you choose 1 - General, you can define some general graphic settings for the calendar: font type, size and color for the texts, background and borders color, text color and background for different elements or events.
  • If, on the other hand, you select 2- Header, you can work on the calendar header, namely defining:
    • the possible calendar title. In case you display it, the title content is defined according to the view. You can define the title size, color and font. 
    • the Background Color.
  • Finally, you can select 3 - Buttons and define the style of the navigation and view buttons, which will be reported on the calendar header. You can:
    • Define the buttons that need to be available: using the Type option, you can decide to display None, only the Previous and Next or the Previous, Next and Today buttons.  In any case, the buttons for the different view types will stay visible. 
    • Set the color that needs to be used for the button text, the background and borders, both On mouseover and On mouse release.


#tips - Alternatives. In addition to the Google Full Calendar Object, the Full Calendar Object is also available. There is a major difference between the 2 objects. Google Full Calendar uses the ID to embed the Google calendar inside the web page: the calendar can be edited on Google Calendar and will always be updated in real time. With the Full Calendar Object, on the other hand, you will need to export/import calendars in .ICS files: in case you apply any changes on the original Calendars, you will then have to update the ICS files used on your website. 


Are you curious to use this Object on your website pages? Install Google Full Calendar now


You don't have enough Credits to buy this Object? Check out our Credit Packs