Devlog

Using the Plugin

This plugin provides a Gutenberg block, a shortcode and a widget.

Using the Gutenberg block

The Gutenberg block is called Private Google Calendars and can be used to display one or more Google calendars on a WordPress website. Each block can be configured by setting the values in the block settings section that appears when a Gutenberg block is selected. Below you find a description of the possible options that can be configured.

Selected calendar(s)

Here you'll find your Google calendars that have been selected in the settings page. You can choose which calendars you want to display for this block.

Comma separated list of public calendar IDs

If you want to display public calendars that haven't been added to your Google account, you can enter the calendar ID's here, separated by comma's.

Calendar options

Edit FullCalendar config

This is an option for more advanced users who want to configure the calendar in more detail, for example to change the buttons you see in the toolbar, the size of the calendar, the maximum number of days that are displayed etc. The values you can use here are the same you see on the FullCalendar documentation that can be used for the FullCalendar constructor.

Before you can edit it, you have to click on Copy default FullCalendar config link you see below the block. This will display the below JSON config in the block that you can edit.

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

For example if you want to set the initialView to listWeek and don't want to show the timeGridWeek view:

{
  "initialView": "listWeek",
  "header": {
    "left": "prev,next today",
    "center": "title",
    "right": "listWeek,dayGridMonth"
  }
}

For all the options you can add, see the FullCalendar documentation.

Hide passed events and Hide future events

If you select this option, you can enter the days in the textfield more than X days ago that appears below. For example if you enter 5 in this textfield, it means that events that are more than 5 days in the past won't be displayed in the calendar.

The same logic is true for the Hide future events option.

Theme

Choose a theme for this block. Note that if you don't set anything, the theme that has been set in the settings page will be used. This option can be used to override the theme from the settings page. If you want to create a new theme, just add the CSS file to the css/themes directory of this plugin.

Filter options

The filter is the toolbar with the checkboxes that can be used to enable and disable calendars. You can hide the filter and display it at the top or bottom.

Unchecked calendar IDs

By default all calendars are enabled in the filter. If you want specific calendars to be disabled, enter the calendar ID in this textfield, separated by comma's.

The popup appears when an event is clicked. You can disable the popups, which is the default, or enable them and specify exactly which information, like event location, attendees, etc, should be displayed in the popup.

Using the shortcode

The pgc shortcode will display all selected Google calendars with the default configuration, e.g. with dayGridMonth, timeGridWeek and listWeek views and with the previous, next and today button on the left, the date in the center and the views on the right.

You can configure the shortcode by setting attributes. For example if you want to set the initialView to listWeek and don't want to show the timeGridWeek view:

[pgc initial_view="listWeek" header-right="listWeek,dayGridMonth"]

There are 2 categories of attributes:

  1. FullCalendar attributes: attributes that are translated to the FullCalendar instance, like initial_view and header-right.
  2. Plugin attributes: attributes that FullCalendar doesn't know, like eventpopup and hidepassed.

Using FullCalendar properties in the shortcode

If you want to use FullCalendar properties in the shortcode, you have to follow these 2 rules:

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

For example see the following FullCalendar configuration:

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

The shortcode variant looks like this:

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

And the result looks like:

Select calendars

By default all calendars that have been selected in the settings page are displayed. If you want specify which calendars should be displayed, set the calendar ID's in the calendarids attribute separated by comma's.

[pgc calendarids="calendarID1,calendarID2"]

Hide passed and future events

Specify the hidepassed and/or hidefuture attributes with the number of days. For example to hide all passed events and show events for the next 10 days:

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

Theme

Specify the theme attribute with the theme that should be used for this calendar. By default the theme specified in the settings page is used. See for available themes the settings page. You can add your own themes by adding the CSS file to the css/themes directory.

[pgc theme="dark"]

Filter options

Use the filter attribute to disable the filter or change the location (top, bottom). For example to disable the filter:

[pgc filter="false"]

Uncheck calendars in filter

Add the calendar ID's to the uncheckedcalendarids attribute if you want these calendars not to be selected by default in the filter.

[pgc uncheckedcalendarids="calendarID1,calendarID2"]

Event popup options

The following attributes can be set to configure the event popup:

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

Using the widget

The widget works the same as the Gutenberg block explained previously so look there for more information.