Devlog

Private Google Calendars

With the Private Google Calendars plugin you can display private and public Google calendars on your WordPress website.

Before you can display private and public Google calendars, you have some setup to do.

Setup

The following steps need to completed for both private and public calendars:

  1. Install the plugin. You can find the settings page in the Settings menu.
  2. Create a Google project and enable the Google Calendar API.

Setup for public calendars

  1. Go to the Credentials section in your Google project and add an API key.
  2. Paste this API key into the Private Google Calendars settings page and save it.
  3. Now you can display public calendars by using the calendar ID. For example the calendar ID of the public Holidays in United States calendar is en.usa#holiday@group.v.calendar.google.com.

Setup for private calendars

  1. Go to the Credentials section in your Google project and add a new Client-ID OAuth.
  2. Choose Webapplication for app type
  3. Add the Authorized redirect URI and save it. This URL can be seen in the Private Google Calendars settings page in an orange box. Make sure you copy and paste this URL exactly as it is.
  4. Download the client secret JSON file.
  5. Upload this file into the Private Calendar Google settings page.
  6. Now you will go through the authorize process and Google will ask you to allow this plugin to access your calendars. You may see an Unverified app warning – this is harmless and can be skipped.
  7. You will now be redirected back to the Private Google Calenders settings page where you will see your private calendars (if you have any).
  8. Select the calendars you want to be available for display. Note that this is a first selection. When you are displaying the calendars (like with the widget or shortcode), you can select the calendars from this first selection.

Displaying calendars

This plugin provides 3 ways to display calendars:

  • Widget
  • Shortcode
  • Gutenberg block

With the widget you can display calendars in the widget area of your website. With the shortcode and the Gutenberg block you can display calendars in a post or page.

Shortcode

The shortcode is called pgc. If you are OK with the default settings, you can just do:

[pgc]

This will display all the private calendars you selected in the settings page.

Specify settings in the shortcode

You can change many settings by adding attributes to the shortcode. Below you’ll find some examples.

Notice that some attributes have a dash and other ones have an underscore. This is not a mistake, but has to do with the fact that these attributes are mapped to the FullCalendar properties. This plugin makes use of FullCalendar and translates the shortcode properties to a format that FullCalendar understands. See below for more information about the mapping between the shortcode attributes and the FullCalendar properties.

[pgc event_color="green" event_text_color="white" header-center="title" header-right="today prev,next" header-left="dayGridMonth,timeGridWeek,listWeek,listDay" locale="nl-nl" time_zone="America/New_York" footer-left="timeGridDay,listWeek,listDay" filter="bottom" calendarids="trg7fc1oksf1ma9a0dg78hvccg@group.calendar.google.com,ehqelgh6hq4juqhjd79g4b5qkk@group.calendar.google.com"]

In this example we’ve changed the event color, changed the header and footer of the calendar, set the locale and timezone, moved the filter to the bottom and specified some of the calendars we’ve selected in the settings page.

Display public calendars in the shortcode

[pgc public="true" calendarids="en.usa#holiday@group.v.calendar.google.com" filter="false"]

In this example we set the USA Holidays calendar, notice that this time we have to specify the public attribute and set it to true. If we don’t do this, the plugin thinks it’s a private calendar.

Hide future or passed events in the shortcode

[pgc hidepassed="true" hidefuture="10"]

Here we hide all passed events and hide future events that are more than 10 days from here.

Event popup in the shortcode

[pgc eventpopup="true" eventlink="true" eventdescription="true" eventattachments="true" eventattendees="true" eventlocation="true" eventcreator="true" eventcalendarname="true"]

Here we enable the event popup. You can see the popup by clicking on an event in the calendar. This popup can display many different properties of an event, like the link to the event, the location and the attendees. Each of them can be enabled or disabled.

Shortcode attributes vs. FullCalendar properties

Below is an example of how FullCalendar wants to have its properties:

{
  "eventColor": "black",
  "eventTextColor": "white",
  "header": {
    "center": "title",
    "right": "today prev,next",
    "left": "dayGridMonth,timeGridWeek,listWeek"
  }
}

And this is the shortcode equivalent:

[pgc event_color="black" event_text_color="white" header-center="title" header-right="today prev,next" header-left="dayGridMonth,timeGridWeek,listWeek"]

As you can see these are the rules for mapping shortcode attributes to FullCalendar properties:

  • Nested properties like should be written with a dash “-“.
  • The camelCase properties should be written with an underscore “_”.

Gutenberg block

The Gutenberg block is called Private Google Calendars. After you choose it, you can make your settings in the sidepanel. If you want to set some FullCalendar properties, make sure you select the Edit FullCalendar config option.

Widget

Just as is the case with the Gutenberg block, the settings you can make are displayed in the widget and you can also set FullCalendar properties.

Private Google Calendars settings page

You can find the settings page in the Settings section. On this page you can make the following settings:

General settings

By default, every time you display your calendar, it will request the events from Google. If you have a lot of Google calendars and/or events, this can take some time. If you set the cache, the response from Google will be stored in your WordPress database for as many minutes as you specify. This can speed things up. There is one caveat: if you set the cache to a day for example (1440) and you add an event to your Google calendar, then this new event will be only be displayed after the cache is invalid so in this case after 1 day from the time this cache was saved.

Public calendar settings

Here you can set your API key and specify names and color for your public calendars.

Private calendar settings

When you haven’t set things up yet, this will show the upload button where you can upload your client secret JSON file. After that, it will show all your private calendars that you can select or deselect.

There are also some tools available, like Update calendars that you can use if you added or removed a calendar to/from your account.

FullCalendar vs this plugin

This plugin uses FullCalendar to display the calendar. FullCalendar is a Javascript calendar library that has many customisation options. Almost all of the FullCalendar customisation options can also be set in this plugin. This plugin just hands over these options to FullCalendar.

These FullCalendar properties can be set in the FullCalendar JSON config if you’re using the widget and/or the Gutenberg block. If you use the shortcode, these can be set as attributes but have to be translated somewhat (see above for more info).

W3 Total Cache

If you use W3 Total Cache and have minify JS enabled, make sure that you do one of the following:
Choose Combine only in the Minify settings.
OR
Enter the below files in the Never minify the following JS files textbox. Make sure you add the full path to these files from the root of your installation, so if your WordPress website is located in the wordpress directory, this will be:

wordpress/wp-content/plugins/private-google-calendars/lib/fullcalendar4/core/main.min.js
wordpress/wp-content/plugins/private-google-calendars/lib/fullcalendar4/core/locales-all.min.js
wordpress/wp-content/plugins/private-google-calendars/lib/fullcalendar4/list/main.min.js
wordpress/wp-content/plugins/private-google-calendars/lib/fullcalendar4/timegrid/main.min.js

FAQ

Why are some events missing or have incorrect times?

If you notice that some events are not displayed on the day you expect or the time is not what you expect, then it may be that your calendar on your website has another timezone than your Google calendar(s). If you notice this, you can specify the timezone.

For the shortcode:

[pgc time_zone="America/New_York"]

In the widget and the Gutenberg block you can specify timeZone (notice uppercase Z!) in the FullCalendar config.

How can I set another starting day?

The starting day is one of the properties that is determined by the locale. The locale also translates the text on the buttons in the calendar and the time format used. So most of the time you just want to set the locale:

For example this will set the locale to the Dutch one and will make the starting day Monday:

[pgc locale="nl-nl"]

In the widget and Gutenberg block you can add it to the FullCalendar config, for example:

{
  "other_properties: "",
  "locale": "nl-nl"
}

If you only want to set the starting day, you can use the firstDay property (0 = Sunday). In the shortcode this will be first_day.

In this plugin you can also specify the days to add or subtract from today. For example if you want to start the calendar always with yesterday, you can do:

[pgc first_day="-1"]

Always start with the day of today (this looks a bit clumsy but if you specify “0” it means “Sunday”):

[pgc first_day="+0"]

Show a specific week

With the defaultView (default_view if you use the shortcode) property you can set the view that is displayed by default. Valid values are dayGridMonth, timeGridWeek, timeGridDay, listWeek and listDay.

Shortcode example where you only want to display the listWeek view:

[pgc default_view="listWeek" header-right="prev,next today" header-left="" header-center="title" ]

Change checkmark of the filter

By default the “✔” sign is used to display a selected calendar in the filter. If you want to change it to for example “✗” you can use the following CSS:

.pgc-calendar-filter input[type=checkbox] + label span:before {
  content: "✗"
}

Force all events to be visible on month view

When there are too many events on the month view, you see the “+ 2 more” link. If you don’t want to have this, you can use the eventLimit property (event_limit for shortcode).

[pgc event_limit="false"]

Control width and height of event popup

By default the popup will be as heigh as the content. This can cause the popup to be off the screen. You can control the height and width of the popup with the following CSS:

.tippy-box {
  max-height:200px;
  overflow-y: auto;
  max-width: 500px !important;
}

Error redirect_uri_mismatch when I want to authorize

This means that you didn’t add your current URL [YOURWEBSITE]/wp-admin/options-general.php?page=pgc to the authorized redirect URIs. See This means that you didn’t add your current URL [YOURWEBSITE]/wp-admin/options-general.php?page=pgc to the authorized redirect URIs. See Setup for private calendars for more info.

Format dates

You can format the following properties: columnHeaderFormat (by default day names displayed for month and week views), eventTimeFormat (date displayed in the events) and titleFormat (title displayed in the header).

FullCalendar uses Moment.js to format the date. See https://momentjs.com/docs/#/displaying/format/ for information about the formatting options.

For example the below configuration will make the event date displayed as: “1st Jan”

[pgc event_time_format="Do MMM"]

Config options in wp-config.php

You can set the following options in wp-config.php:

  • PGC_EVENTS_MAX_RESULTS (default 250) – Maximum number of events that Google returns.
  • PGC_EVENTS_DEFAULT_TITLE (default ”) – If the title is empty, the value of this option is displayed instead.