{"id":3200,"date":"2020-08-21T14:01:33","date_gmt":"2020-08-21T12:01:33","guid":{"rendered":"https:\/\/www.combell.nl\/en\/help\/?post_type=ht_kb&p=3200"},"modified":"2022-04-27T19:11:48","modified_gmt":"2022-04-27T17:11:48","slug":"sitebuilder-google-calendar-widget","status":"publish","type":"ht_kb","link":"https:\/\/www.combell.nl\/en\/help\/kb\/sitebuilder-google-calendar-widget\/","title":{"rendered":"Google Calendar Widget"},"content":{"rendered":"
\n
\n
\n
\n

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

\n \t\t
\r\n \t\t\t \t\t\t \t\t\t\t

\r\n \t\t\t\t\tNote<\/p>\n

    \n
  • This widget enables you to display public Google calendars only.<\/li>\n
  • 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. \t\t\t\t<\/p>\r\n \t\t\t \t\t\t\r\n \t\t<\/div>\r\n \t\t<\/li>\n<\/ul>\n<\/div>\n

    To add the widget<\/span>:<\/strong><\/p>\n

      \n
    1. In the left panel, click “Widget<\/span>s”.<\/li>\n
    2. Click and drag the “Google calendar” widget<\/span> into your site.<\/li>\n<\/ol>\n

      Content Editor<\/h2>\n

      To access the content editor:<\/strong><\/p>\n

        \n
      1. Right-click the widget<\/span>, and click “Edit Content”.<\/li>\n
      2. Click “Sign in with Google”. After the account is connected, you will see all public Google calendars associated with that account.<\/li>\n
      3. Select the public calendar you want to display and which day of the week you want the calendar to start on.<\/li>\n
      4. To add or edit events, go directly to the Google calendar.<\/li>\n<\/ol>\n

        Design Editor<\/h2>\n

        To access the design editor:<\/strong><\/p>\n

          \n
        1. Right-click the widget<\/span>, and click “Edit Design”.<\/li>\n
        2. To customize the style of the calendar sections, click “Calendar”. Customize the following:\n
            \n
          • Header\u2014month & icon<\/li>\n
          • Days of the week<\/li>\n
          • All days<\/li>\n
          • Events<\/li>\n
          • Today<\/li>\n
          • Calendar direction<\/li>\n<\/ul>\n<\/li>\n
          • 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.<\/li>\n<\/ol>\n

             <\/p>\n<\/div>\n<\/div>\n

            <\/div>\n<\/div>\n<\/section>\n