Google Calendar

Google Calendar widget

Integrate one of the mostly widely used calendars in the world onto your site with with the Google Calendar widget. Calendar events and appointments can be synced by site visitors on mobile devices, tablets, or any place connected with Google. Extensive styling options are available for the calendar and event popup.

Demo: https://demo.wocode.com/google-calendar

Tutorial Video

Setup

WIDGET PLACEMENT

  • Place the Google Calendar widget on your page where you would like the calendar to appear.
  • If you wish to resize the slider, use the blue resizing handle in the bottom right corner of the widget container.
  • The position (left/center/right) can be easily set by right-clicking on the widget and using the alignment tool.

WIDGET OPTIONS (CONTENT)

  • Open the widget option panel.
  • If you already have a Google account, sign in using the “Sign in with Google” button.
  • If you don’t have an account, you may create one using the “Create Now” link.
  • Calendar To Display: Once you’ve signed in, you will be shown a list of public calendars associated with your account. Choose a calendar. Note that you may only display one calendar.
  • Start Week On: This allows you to set which day the calendar will display the start of the week on, the available options are: Sunday, Monday, Saturday

  • Use 24-hour format: When enabled it will show the events in the calendar using the 24-hour format (i.e. 15:00 instead of 3pm)

WIDGET OPTIONS (DESIGN)

The Design tab of the widget contains extensive styling options. You can control the style of the calendar sections (header, days of the week, all days, etc.) as well as the event popup, frame style and more.

The majority of these options will not be explained here in detail, as they are self-explanatory and are labeled with their specific function.

TIPS

  • To add or edit events, go directly to your Google calendar.
  • Only public Google calendars may be displayed. To learn more about Google calendars and permissions, go here.
  • If you’ve added a calendar after logging into an account, the calendar may not appear in the calendar list. To correct, disconnect and then reconnect the account.