Pretty Google Calendar

1. 01Upload the pretty-google-calendar folder to the /wp-content/plugins/ directory.
2. 02Activate Pretty Google Calendar through the ‘Plugins’ menu in WordPress dashboard.
3. 03Obtain your Google Calendar API key (see below)
4. 04Add the API key to Settings -> Pretty Google Calendar Settings
5. 05Use the shortcode [pretty_google_calendar gcal="calendarID@group.calendar.google.com"] directly in your page or post content.

Shortcode Options

gcal="CalendarID,CalendarID"

Calendar ID of the desired google calendar (note: must be set to ‘Make available to public’. To display multiple calendars, separate ID’s by a comma. (Note: calendars must fall under same API access.))

cal_ids="identifier,identifier" \

Optional custom CSS identifiers for each calendar (must match the number of calendars in gcal ). Allows using meaningful names instead of numeric indexes for styling. Example: cal_ids="soccer,baseball" generates classes like .pgcal-calendar-soccer and .pgcal-calendar-baseball . Identifiers should be lowercase alphanumeric with hyphens. Defaults to numeric indexes (0, 1, 2, etc.)

locale="en"

Sets the locale for calendar. Defaults to “en”.

list_type="listCustom"

Sets the list type. Options: listDay , listWeek , listMonth , listYear , and listCustom . (Also accepts day, week, month, year, and custom). Defaults to listCustom for backward compatibility.

Note: listCustom allows you to set the number of days you want to display from the current date. Whereas listMonth shows all the events from this month (including past events), list_type="custom" custom_days="28" will show the next 28 days across months.

custom_days="28"

Sets the number of days to show in the list tab. Defaults to 28. Only used with listCustom.

custom_list_button="list"

Sets the label for the listCustom button. Defaults to “list”.

views="dayGridMonth, listCustom"

Sets the view types available. If only one view is provided, no view switch buttons will be shown. Defaults to “dayGridMonth, listCustom”.

initial_view="dayGridMonth"

Sets the default view to be displayed when opening the page. Defaults to “dayGridMonth”. Note: If only one view is specified in “views”, “initial_view” will automatically be set to that view and does not need to be specified.

enforce_listview_on_mobile="true"

Sets the change to the list view behavior on small screens. Options: “true” and “false”. Defaults to “true”. This option has no effect if there is no list view declared in the “views” option.

show_today_button="true"

Sets the visibility of the “Today” button. Options: “true” and “false”. Defaults to “true”.

show_title="true"

Sets the visibility of the calendar title. Options: “true” and “false”. Defaults to “true”.

hide_past="false"

Hides past events from the calendar completely. Options: true and false . Defaults to false . When set to true , events before today will not be displayed in any view.

id_hash=random

Sets the ID hash for a calendar. If you have multiple calendars on a page and need to style them, you can set this to a permanent code. Otherwise, it’ll randomly generate each load. (Note: as of v2.0.0 this can only be alphanumeric.)

use_tooltip="true"

Migrating from global setting for individual calendar styling. Whether the floating tooltip for event pops up on click.

no_link="true"

Migrating from global setting for individual calendar styling. Whether to disable link to calendar.google.com on click.

fc_args = JSON string ((EXPERIMENTAL))

Allows you to override or impliment just about any FullCalendar argument (with some exception). For example: fc_args='{"weekNumbers":"true", "eventTextColor":"red"}'

Note: any argument that contains [] will fail due to WordPress’ parsing of shortcodes. No workaround currently. Note: this is experimental – things may break.

Styling Multiple Calendars

As of v1.7.0, each calendar gets it’s own CSS selector: pgcal-event-# where the # is the order of the listed calendar (starting with 0). So if you have two calendars in one, you can use pgcal-event-0 to style the first, and pgcal-event-1 to style the second calendar.

The following improvements were made in v2.2.0 for easier styling of multiple calendars: – Custome calendar identifiers via cal_ids shortcode argument (see above) (defaults to numeric indexes if not provided). – Events get new class name: pgcal-calendar-0-event for consistent naming convention (old class pgcal-event-0 is still supported for backward compatibility). – Event pop-up tooltips now get a calendar-specific class: pgcal-calendar-0-event-popup for easier styling of event pop-ups per calendar.

Obtaining Google Calendar API Key

1. 06Go to the Google Cloud Console and sign in.
2. 07Click the project selector (top bar) → New project.
3. 08Give the project a name and click Create.
4. 09With the project selected, go to APIs & Services → Library.
5. 10Search for Google Calendar API and click Enable.
6. 11Go to APIs & Services → Credentials.
7. 12Click Create credentials → API key.
8. 13Copy the API key.
9. 14(Recommended) Restrict the key: Click the API key you just created.
10. 15Under Application restrictions, choose Websites (HTTP referrers).
11. 16Add your site’s URL (e.g. https://example.com/*).
12. 17Under API restrictions, choose Restrict key.
13. 18Select Google Calendar API.
14. 19Click Save.

Paste the API key into Pretty Google Calendar’s Google API field in WordPress and save.

Make your Google Calendar public:

1. 20In the Google Calendar interface, locate the “My calendars” area on the left.
2. 21Hover over the calendar you need and click the downward arrow.
3. 22A menu will appear. Click “Share this Calendar”.
4. 23Check “Make this calendar public”.
5. 24Make sure “Share only my free/busy information” is unchecked.
6. 25Click “Save”.

Obtain your Google Calendar’s ID:

1. 26In the Google Calendar interface, locate the “My calendars” area on the left.
2. 27Hover over the calendar you need and click the downward arrow.
3. 28A menu will appear. Click “Calendar settings”.
4. 29In the “Integrage Calendar” section of the screen, you will see your “Calendar ID”. It will look something like “abcd1234@group.calendar.google.com” (or your email if it’s your default calendar) this is the value you enter into the shortcode.