Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Add Google Calendar in WordPress

Last updated on by
Elegant Themes
How to Add Google Calendar in WordPress

Calendars are probably one of the most used apps on smartphones and tablets. A lot of our users asked us for a way to integrate their Google Calendar in their WordPress websites. In this article, we will show you how to add Google Calendar in your WordPress website. Following the steps in this post, you will be able to integrate Google Calendar on your website, display it in posts, pages or widgets, and it will always be synced with your Google Calendar.

First thing you need to do is install and activate the Google Calendar Events plugin. Once activated, a Google calendar events menu item will appear under the Settings menu where you can setup and configure the plugin.

To use this plugin, you need to get the public feed for your calendar from Google Calendar and add this feed to the plugin. To get the public feed for your calendar, go to your Google Calendar and click on the arrow next to the calendar you want to share. Click on calendar settings where you will find the XML url of your calendar. Right click on the XML icon and Copy link location.

Copying XML Feed URL of a Shared Google Calendar

Now come back to the plugin settings page and click on the “Add Feed button”. Enter you feed title for the calendar and paste the XML URL you copied from Google Calendar into the feed URL. Click the Add Feed button at the bottom of the page, and you will notice that the page has many other options. The important ones are cache duration and time/date format options. For advance level users there is a display builder which they can use to customize the appearance of their calendars.

Adding Google Calendar Feed into plugin

Google Calendar Events plugin uses shortcodes to display the Calendar grid on any post or page you want. Ideally, you might want to create a page titled Calendar or Events to display the calendar. Go to your post or page edit area and add this shortcode where ever you want the calendar to appear:

[google-calendar-events id="1"]

Google Calendar inside a WordPress post

There are several other options available with the shortcode. Like for example you can choose to either have a grid based display or a simple list, or an ajax powered grid. You can mix different calendars into one grid by adding multiple ids in the shortcode. You can also choose to display feed title and configure other options. For a full list of options check out Google Calendar Events Plugin Guide.

The plugin comes with a widget for those who want to display a Calendar widget showing all the events and happenings. The widget will not appear in your Widgets area unless you add a Calendar Feed. Once you add a Calendar feed, you can add a Google Calendar Events widget to any widget areas, sidebar. The widget has the same configuration options as the shortcode.

Google Calendar Widget settings

To modify the appearance of your calendar you need to provide a custom style sheet url on plugin settings page. Go to Plugins > Editor, select Google Calendar Events from the dropdown menu, click Select and then click google-calendar-events/css/gce-style.css from the list of files.

Copying Calendar Stylesheet

Copy the contents of gce-style.css and paste them into a new .css file. Upload this file to your server, any where but in Google Calendar Events directory. Now edit this newly uploaded css file to change the appearance of calendar.

Small community websites, local government websites, corporate websites, band tour sites, and many others can find this Google Calendar plugin immensely useful. This can be used to organize events and let the world know whats happening. There are many other ways to integrate calendar or time management utilities on a WordPress powered website. How are you doing it on your website? Please let us know in the comments below.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »
  • Cynthia

    Hi,

    Thank you for these instructions they were great! I followed your instructions and I did get the calendar on my website but it won’t update. I waited for the cache of the data to take place and it still doesn’t work…can you think of another reason why it won’t update?

    Thank you!

    • http://www.wpbeginner.com Editorial Staff

      Are you using a caching plugin on your site? Did you try emptying that. Not sure why it won’t update because it is pulling from the XML file.

  • Alycia Nichols

    I will admit to being largely computer-illiterate. I don’t understand about 80% of the lingo. Despite these shortcomings, I somehow miraculously subscribed to Google Calendar AND got it onto my WordPress blog on a page. (I assure you it was accomplished by fumbling my way through for nearly 4 hours. Sigh! :-( ) Here’s what I don’t quite understand: When I make changes or updates to my calendar through Google Calendar, how do I make it change on WordPress? Do I have to go through all those steps of making, copying and pasting that letter/number/symbol code again? I also, through many trials and many, many errors, got it to go onto my sidebar thing. It’s not in calendar form, though; it’s just almost like a bullet-pointed listing. How do I make that change, too? Do they change simultaneously or do I have to deal with them separately? Oh, woe is me with my past-the-half-century-mark brain! Can you please help me out with any answers?

    • http://www.wpbeginner.com Editorial Staff

      Hey Alycia,

      Good job on sticking with it, and working through the steps. When setup properly, the plugin should be able to extract your calendar feeds for events, so you do not have to update the calendars manually on your WordPress end. The reason why it doesn’t update right away is because this plugin caches the data.

      The plugin does this so that it doesn’t need to retrieve the data from Google’s servers every time someone views a page of your site that utilises the plugin. This reduces page load times a little, uses less of your bandwidth and prevents the possibility of being blocked by Google for ‘spamming’ their servers with requests.

      • Alycia Nichols

        Thank you! I checked again, and I see that the updates ARE on there!!! I guess it just took a little time! Thank you SO much for following up with me! I will hopefully get better with all of this in time. You know the old saying: “It’s hard to teach an old dog new tricks.” Woof! :-) Thanks again so much for your help!

  • Raviv

    Love it! What would you guys recommend for a professional service provider that would like to let clients book appointments on his Google Calendar?

  • Jason

    Great write up. the only thing I don’t like about this plugin is that you can’t see the events unless you roll over them, using the “tooltip” type of viewing. This makes it more difficult to see on mobile devices. I like this plugin but may have to find another for large event heavy sites.
    Thanks.