Google Calendar Bridge 2


Google Developer Console design has changed and screenshots attached to configuration instructions below are outdated. Documentation will be updated soon.

We are also working on an updated version of the plugin the should support recommended JSON format for service account keys.

Google Calendar Bridge plugin connects Smart Countdown FX with Google Calendar. Additional one-time setup is required for your Google API and calendar account, please read this document. If you have questions do not hesitate to ask – leave a comment to this post at the bottom of the page.

Google Calendar Bridge plugin supports “countdown to event end” mode.

Sample 1

Countdown widget showing event title, location, date and time zone (if different from default one)

Link to connected public calendar (native Google Calendar view)

View this public calendar with Simple Calendar plugin. This plugin provides a seamless integration of you Google calendar(s) with WP pages or posts. The free version supports public calendars only, but “Premium” should support private calendars also (with OAuth – see Sample 2 below). Please, contact plugin creators if you have doubts. Simple Calendar plugin is not a requirement for Google Calendar Bridge to run.

October 2018

Mon Tue Wed Thu Fri Sat Sun
1
2
  • Event with location
3
4
  • Event with location
5
6
  • Event with location
7
8
  • Event with location
9
10
  • Event with location
11
12
  • Event with location
13
14
  • Event with location
15
16
  • Event with location
17
18
  • Event with location
19
20
  • Event with location
21
22
  • Event with location
23
24
  • Event with location
25
26
  • Event with location
27
28
  • Event with location
29
30
  • Event with location
31

Sample 2

A countdown linked to a private calendar with color filter enabled. Only default calendar color and “red” color events are imported, all other events in this calendar are ignored.

Calendar events (all are set as recurring daily) – note that “Blue color event” is ignored (filtered out by color):

private_cal

Shortcode

You have to add one of the following values to “import_config” attribute:

  • import_config=”scd_google_cal::1″ – use configuration 1.
  • import_config=”scd_google_cal::2″ – use configuration 2.
  • import_config=”scd_google_cal::1::2″ – merge both configurations.

Event titles

Google Calendar Bridge plugin imports extended event data from Google Calendar along with required start date and time and event duration. Depending on plugin settings – “Show event title”, “Show event date”, “Show event location” – additional event information can be displayed in the widget’s “title” area displayed on top of the counter block. By default event data from Google is appended to the generic title configured in widget or set in “title_before_down” and “title_before_up” shortcode attributes. If you prefer to show event data before or within the generic title add “%imported%” placeholder to generic title texts – it will be automatically replaced by event data from Google calendar.

For example, the shortcode used in sample 2:

[smartcountdown import_config="scd_google_cal::2" title_before_down="Time left for " title_before_up="%imported% is in progress" fx_preset="No_FX_animation.xml"]

Please, note that titles displayed below the counter block (if any) will not be affected by event import plugins.

Setup Google Calendar with plugin

If you are not familiar with Google Developers Console you may refer to https://developers.google.com/console/help/new/ to get basic concepts. Detailed configuration instructions are given below but it is presumed that you already have a google account and at least one project in developers console.

The configuration required consists of two basic steps: Google Calendar API configuration and Smart Countdown configuration. If you are using Google Calendar in shared mode you probably have everything already set up so you should login to https://console.developers.google.com/ with your google account, go to the project where you have Calendar API enabled and take note of your current credentials. Then you can skip the next page and go directly to module configuration.

If your google calendar is not shared and / or you don’t have projects in Developers Console yet, please continue reading.

Prepare Google Calendar API – step 1

First you have to create a project in Google Developers Console and enable Calendar API. Please, read https://developers.google.com/console/help/new/ for details. If you already have existing project(s) you can enable Calendar API for one of your projects (if not enabled yet).

After you complete these steps “Enabled APIs” view should look similar to the one on the screenshot below. Caledar API should be listed.

enabled_apis2

PREPARE GOOGLE CALENDAR API – STEP 2

Go to “APIs & Auth / Credentials” pane. The screenshot below is a sample where both OAuth and API key authentication methods are configured but this is not a requirement. At least one of these methods must be set up in order to get the plugin running with Smart Countdown FX. Refer to https://developers.google.com/console/help/new/#usingkeys for authentication methods overview if you cannot decide which authentication method to use. Usually you should use “Public API access” method for public calendars and “OAuth” method for private calendars.

credentials2

For public API access you will only need API key – marked with red border.

Also check IPs restrictions. On the screenshot above it is set to “AnyIP allowed” but in the latest version of Google API configuration interface there are more restriction options. Please, make sure that “HTTP referrers (web sites)” restriction is disabled. Even if you add your domain to allowed referrers list you will not be able to access your public calendar using API key authentication because current version of Google client PHP library doesn’t send “Referer” header with API calls. If you are concerned about protecting your Google API from unauthorized access you should switch to OAuth.

For OAuth authentication you will need the following data to be added to the module configuration later:

  • Email address – marked with red border
  • P12 key file – marked with red arrow. Save this file on your hard disk. Later you will import it in plugin configuration.

When you create a new Key (for public API access) you have to choose “Server Key” option.

server_key

When you create a new Client ID (for OAuth) you have to choose “Service Account” option.

service_account

Prepare your calendar – step 3

Login to your gmail account and go to Calendar application. Then select the calendar which will be connected to Smart Countdown FX and open calendar settings. “Calendar Details” pane should look similar to the one on the screenshot below.

calendar_details2

“Calendar ID” is required for both authentication methods setup, it is important that you take note of the current calendar ID.

It is recommended that your “Calendar Time Zone” is the same as the time zone set in WordPress general settings. Although the countdown value should be correct for most of the events, intervals to “all-day” events will be wrong. You can set the plugin to skip (ignore) all-day events if you experience this issue.

PREPARE YOUR CALENDAR – STEP 4

Go to “Share this Calendar” pane. The settings required depend on the authentication method you are planning to implement.

Public API key:

public_share2

“Make this calendar public” should be checked, otherwise the module will fail requesting calendar events. For this authentication method there is no need to add specific people to share list.

OAuth:

private_share2

“Make this calendar public” should be unchecked. Public calendars will also work but they can be accessed via API key authentication method which is easier to set up. So if you opt for OAuth method of authentication we presume that your calendar is not a public one.

You have to add Email address listed in Developers Console credentials screen (see “Prepare Google API” section) to “Share with specific people” list.

Event color filter – STEP 5 (optional)

Google Calendar event colors play the role of “categories” or “taxonomies” (in WordPress terms), so that different types of events can be distinguished even if they are stored in the same calendar. “Smart Countdown FX Google Calendar Bridge” supports events filter by color, but there is a number of prerequisites in order to get this feature running:

  • OAuth authentication method is required.
  • At least “Writer” access role is required for the person added to “Share with specific people” list in step 4.

If you are concerned about color filtering you should change “See all event details” or whatever you see in “Permission Settings” to “Make changes to events”, as shown on the screenshot below.

write_permissions

Normally, this will never compromise your calendar security (if you do not use the person with “write” permissions in other applications) because Smart Countdown FX will never make changes in connected calendar.

This is the expected Google Calendar API behavior: event color information is available only if authorized user has at least “writer” ACL type. Events color filter is optional. If you configuration doesn’t meet this feature requirements, the plugin will behave normally and will simply ignore event colors when pulling events from your calendar.

Configure Smart Countdown FX Google Calendar Bridge – step 6

The plugin supports two independent configurations, so that up to two widget instances (or widgets inserted in posts via shortcode) can show countdowns to events from different calendars. It’s quite unlikely that you will wish to merge events from both configurations in the same widget but you can do it if needed.

The instructions below describe plugin configuration for both “API key” and “OAuth” authorization methods. Of course, if you choose “Disabled” in “Authorization” fields in plugin settings, the configuration will be disabled and all widgets connected to this configuration will not be displayed at all because no events will be imported.

The fields displayed on plugin settings form depend on the chosen authorization method. If “disabled” is selected all fields for a disabled configuration will be hidden.

API key authentication:

plugin_api_key

OAuth authentication:

plugin_oauth

The form samples shown above have a lot of fields in common but some settings are specific to authorization method selected.

Specific fields for “API key” authorization:

This is the easiest way to connect a public Google calendar to Smart Countdown FX. The only specific setting required is “API key”.

  • API key – enter API key displayed in “Google Developer Console” / “API and auth” / “Credentials” (Public API access section – see step 2).
  • Link event title – calendar event title will act as a link to event details view in native Google Calendar window (this feature is not available for private calendars because it will require login and can cause confusion).

Specific fields for “OAuth” authorization:

  • OAuth email – enter Email address displayed in “Google Developer Console” / “API and auth” / “Credentials” (OAuth section – see step 2).
  • p12 key file – the screenshot above was taken after p12 key was already uploaded and setting were saved. That is why the button text says “Update p12 key”. When you configure the plugin for the first time, a file selection control will appear. Select .p12 file you have previously saved to your hard disk on step 2 and save plugin settings.

Common fields:

  • Title – configuration name, it will appear in available import configurations in “Import events from” widget setting. It will not affect plugin functions and is used to help site administrator to choose correct option in widget configuration.
  • Authorization – required setting. It defines how plugin connects to Google Calendar API service. “Disabled” option will simply turn off a configuration – no events will be imported.
  • Calendar ID – required setting. Enter Calendar ID that was displayed in Step 3.
  • All-day events start time – all-day events generally do not suit for a countdown and default setting is “Discard all-day events” so that this kind of events will not be imported to Smart Countdown FX at all. Anyway, if you wish to import all-day events select event start time from the list. The counter will presume that all-day events start at the time chosen. Please note that in some cases and if default calendar time zone is different from the one selected in WordPress general settings, countdown may display wrong results for all-day events.
  • API cache time – normally there is no need to query Google API each time the page is reloaded. Events imported from Google Calendar can be stored in cache for some time resulting in a) faster page load, b) save API usage quota. When you first setup the plugin and during tests or experiments you can choose not to cache event data at all, so that the changes you make to your calendar are immediately reflected in the widget. Later it is recommended to activate events cache.
  • Show event title – include event title from Google into the title configured in widget – “Title before counter for countdown mode”,  “Title before counter for count up mode”.
  • Show event date – include event date and time in title. If event time zone is not default, time zone will also be displayed.
  • Show event location – include event location (if set) in title.
DOWNLOAD SMART COUNTDOWN FX GOOGLE BRIDGE

Leave a comment

Your email address will not be published. Required fields are marked *

2 thoughts on “Google Calendar Bridge