Pretty Google Calendar

Description

You: I just want to embed a Google Calendar in my WordPress site.
Google: Here’s a special kind of ugly!
Pretty Google Calendar: I got this.

This is a light and simple to use plugin that embeds Google Calendars in your website with style, beauty and grace.

Highlights:

  • Out of the box support for calendar grid and agenda list view
  • Responsive design switches to list view on smaller screens
  • List view customizable to day, week, month, year or custom number of days

How it works:

  1. Continue to manage events using Google Calendar as you’ve always done.
  2. Add a shortcode to your page.
  3. Sigh with relief.
  4. That’s it.

Screenshots

  • Pretty Google Calendar.
  • List View.
  • Optional Event Popover.
  • Settings page. It's that simple.

Installation

  1. Upload the pretty-google-calendar folder to the /wp-content/plugins/ directory.
  2. Activate Pretty Google Calendar through the ‘Plugins’ menu in WordPress dashboard.
  3. Obtain your Google Calendar API key (see below)
  4. Add the API key to Settings -> Pretty Google Calendar Settings
  5. Use 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.))

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”.

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”.

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.

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.

Obtaining Google Calendar API Key

  1. The good folks at WPBeginner have a comprehensive writeup: https://www.wpbeginner.com/plugins/how-to-add-google-calendar-in-wordpress/

(Although in the API Restrictions Section, you may need “Don’t Restrict Key” selected. YMMV.)

Make your Google Calendar public:

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

Obtain your Google Calendar’s ID:

  1. In the Google Calendar interface, locate the “My calendars” area on the left.
  2. Hover over the calendar you need and click the downward arrow.
  3. A menu will appear. Click “Calendar settings”.
  4. In the “Calendar Address” section of the screen, you will see your Calendar ID. It will look something like “abcd1234@group.calendar.google.com” this is the value you enter into the shortcode.

FAQ

What sorcery is this?!

Pretty Google Calendar impliments the excellent Full Calendar for you, and tosses in a little Tippy.js and Popper to make things… well… pop.

Can I use this to manage a calendar?

No. All calendar events are maintaned via Google Calendar, this plugin just displays them in a non-shitty way.

How do I theme the calendar?

Add custom css to your theme to tweak to your desire.

Can this plugin do X,Y or Z?

Probably not. But it maybe could!

Pretty Google Calendar is purposefully simple and easy, set up with a few defaults to make things just work. However, there may be a killer feature you want that others are clammering for.

Since it is based on Full Calendar, theoretically, anything that is possible there is possible here. Contact me for requests for additional functionality, and let’s see what we can create together!

Reviews

September 23, 2023
I needed a simple events calendar for a UK charity website. After trying several WordPress plugins I came to the conclusion that Pretty Google Calendar was by far the best. It looks great on desktop, tablet and mobile. It has an easy switch from tabular month view to list which many plugins only offer in versions you have to pay for. The layout is clean, simple functional and looks great. I am extremely grateful for this fab plugin, thank you!
August 22, 2023
This is a very sophisticated and beautiful calendar!It is easy to operate and very user-friendly.The owner seems to be providing friendly support, which is reassuring. I will definitely use it in the future!Thank you from the bottom of my heart for making this wonderful plugin.
August 12, 2023 1 reply
This is by far the sleekest google calendar plugin integration. The display pops and the settings do exactly what you'd expect. It works great on mobile vs desktop. I like it so much I made a (small) donnation to the dev ! Google should buy this to properly integrate gcal anywhere.
March 15, 2023 3 replies
It shows up nicely in editor mode but once looking at the frontend it ignores all parameters, and in the footer it just says loading...getting support now.
March 6, 2023
Is you follow the instructions in the previous commenter's posts, it will work like a charm. This is the one that got me up and running: If you copy and paste the shortcode from that tutorial page, it won’t work. That example has “smart quotes” (ie, “ and ”) instead of regular “straight quotes” ("). Following the op’s link above, and turning on Chrome’s devtools and looking at the Network tab, I can see that’s his problem too. The call to googleapis.com has extra characters surrounding the calendar id. Those extra characters are the “smart quotes.” Just retype the shortcode (type the quote characters instead of copying and pasting from the tutorial) and give it a try.
February 24, 2023 2 replies
Worked perfectly for 2 months and then suddenly stopped. We can only see "loading" on the website.
Read all 12 reviews

Contributors & Developers

“Pretty Google Calendar” is open source software. The following people have contributed to this plugin.

Contributors

“Pretty Google Calendar” has been translated into 4 locales. Thank you to the translators for their contributions.

Translate “Pretty Google Calendar” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.6.2

  • Fixed: Broken table margin

1.6.1

  • Fixed: Arg parsing in shortcode

1.6.0

  • Added: Multiple calendars on one page
  • Added: use_tooltip shortcode arg for calendar specific options
  • Added: no_link shortcode arg for calendar speficic options
  • Fixed: Security fixes

1.5.1

  • Fixed: Better parsing of urls to accomodate existing tags

1.5.0

  • Tested to WordPress 6.3.1
  • Added: End times in details popup
  • Added: Location under time in popup
  • Added: Shortcode instructions link to settings page
  • Fixed: URLs in descriptions are now parsed
  • Fixed: Remove seconds on pop-up time

1.4.1

  • Fixed: localization text domain

1.4.0

  • Added: support for multiple calendars displayed in one
  • Added: full internationalization (Thanks @mwguerra!)
  • Added: new shortcode parameters (view, initial_view, enforce_listview_on_mobile, show_today_button, show_title) (Heroic work by @mwguerra!)
  • Tested to WordPress 6.0.3

1.3.1

Version bump for WP’s awkward versioning system.

1.3.0

  • Added: list type switcher
  • Added: custom list button label
  • Added: locale support

1.2.0

  • Added: disable link option
  • Added: “list_days” shortcode option
  • Fixed: timezone on tooltip
  • FullCalendar update to v5.11.0
  • Tested to WordPress 5.9.3

1.1.0

Initial Public Release