How to Add Google Calendar in WordPress

Calendars are an integral part of our daily lives, both in the personal and business environments. While some are made of paper, there is a growing need for online calendars that can help with scheduling tasks, events, meetings, being aware of deadlines, or simply staying more organized. As such, it’s no surprise that calendars have become a necessity for WordPress websites across many business niches.

While there are many calendar options available, the one that stands out for its professionalism and ease of use is the Google Calendar. And it’s the one we’ll be tackling in this article while discussing how you can add a Google Calendar to your WordPress website. Follow along as we cover all you need to know to get your WordPress site a Google Calendar and keep your visitors, readers, and customers in touch with upcoming events, meet-ups, classes, limited sale periods, and much more. To make it easier to navigate, we’ve broken this process down into smaller steps:

How to add Google Calendar in WordPress

While it’s clear how a Google Calendar can benefit you, the question remains about how to add it to your site. You can add this functionality using custom code, but finding a suitable WordPress plugin for adding a Google Calendar is far more user-friendly. That’s why we’ll focus on explaining the process using the Simple Calendar plugin.

The Simple Calendar is a freemium plugin that makes it easy to integrate Google Calendar with WordPress and display the calendars in a grid or list view. The free version of the plugin allows you to display only the Google Calendars that are made public, with options to adjust the time zone, date/time format, and start of the week view.

The plugin also offers premium add-ons for Google Calendar and FullCalendar. The Google Calendar premium add-ons allow for the display of both public and private Google Calendars, and they support highlighting events with the same colors found in matching events within the Google Calendar app. With a premium addon, you can also display a more detailed list of information, including event attendee names, avatars, RSVP status, and the event organizer information. All this is accompanied by premium support service.

Besides setting up the plugin, a big part of the configuration process involves using the Google Cloud Platform. Since we will be showing you how the process works using only the free version of this plugin, we will need to create a simple API key. However, if you opt to use the Google Calendar premium add-ons, you’ll need an OAuth Client ID instead. Furthermore, the whole configuration process is a bit lengthy, which is why we divided it into three sections, each dedicated to a specific part of the process.

Configuring the Google Calendar API and API key

The first part of the configuration process involves integrating a Google Cloud project with the Simple Calendar plugin. That project needs to have the Google Calendar API enabled and the integration will be done using an API key. Let’s take a look at how this is done.

After installing the plugin, navigate to the Calendars > Settings section. This will place you within the Event Sources tab by default. To proceed, you will need to insert a properly created Google API Key tied to the Google Calendar API.

Therefore, the next step involves creating a Google project and an adequate Google API key.

To do this, navigate to the Google Cloud Console and log in with your Google account. We recommend you do so in a separate browser tab as you will need to switch back-and-forth between the plugin setup and the Google Cloud Console later.

Once you’ve logged in to the Google Cloud Platform, you will need to create a new project. If you’ve created Google projects before, one of those will be selected by default. Click on the project name to view a list of all your projects and get the New Project button.

After clicking on the New Project button, you will see the New Project screen.

On the other hand, if you haven’t created any Google projects previously, you will need to click on the Create project button located within the Dashboard’s main screen. This will lead you to the same New Project screen.

After opening the New Project screen, insert a project name and press the Create button. If you wish, you can also assign a location to the project before creating it.

The new project will be created shortly after. Then you’ll need to add the Google Calendar API to it. Navigate to APIs & Services > Library from the menu on the left.

Scroll down a bit to the Google Workspace section, and click on the Google Calendar API. If you aren’t able to find it, you can look for the Google Calendar API using the search bar at the top.

Once you click on the Google Calendar API, its page will be displayed. To add the API to your newly-created project, press the Enable button.

However, to properly use the Google Calendar API, you will need to create a Google API key that is tied to it or the Google project you previously created. In this case, we will show the latter. Click on Credentials from the left side menu, while staying within the Google Calendar API.

This will open the Credentials page belonging to the Google Calendar API. However, clicking on the Create credentials link in the top part of the page will not create the Google API key that we want. Instead, you will be given the following options: OAuth Client ID, Service account, and Help me choose (between the two previously mentioned options). Those same options would be available if you clicked on the Create Credentials link that comes after the message saying “To use this API, you may need credentials. Click ‘Create credentials’ to get started.” in the previous screen.

Since we want a simple API key that checks quota and access, we need to click on the Credentials in APIs & Services link located within the Credentials compatible with this API.

This will allow us to assign a Google API key directly to this project. Alternatively, the same could be done by returning to the Dashboard section of your project after enabling the Google Calendar API and then navigating to APIs & Services > Credentials.

On this page, you will get an overview of all the API keys that you previously created, as well as the option to create new ones. To create a new API key, click the Create credentials link located in the top section of the page. At this point, you will see the three options we mentioned previously accompanied by a fourth one called API key, which you should select.

Shortly after, your API key will be created and displayed in a popup window. You will be able to copy it from here either manually or by using the Copy button next to the key.

You will also see a warning stating that you should restrict the key to prevent unauthorized use in production. However, the plugin documentation doesn’t require you to set restrictions on the API key. As such, you can simply proceed to the following step—pasting your API key within the plugin.

However, you can still choose to set restrictions by clicking on the Restrict key or the Edit API key option next to the appropriate key in the API Keys list. If you opt to do that, we recommend putting an API restriction only. For example, you can restrict the API key to the Google Calendar API only, as shown below.

You should be aware that setting an application restriction may lead to a 403 Error in later steps. For example, when editing a specific calendar custom post item later on in the configuration process. The error screen you get might look something like this. If this happens to you, you can go back and disable the restrictions you set, or reach out to the plugin’s authors for assistance.

With that being said, after creating the API key, you should copy and paste it within the appropriate field in the plugin options. This is done by switching to the tab where you have the WordPress dashboard open and navigating to the Calendars > Settings. Then you need to paste the key within the Google API Key field located in the Event Sources tab. Finally, press the Save Changes button below to save the inserted key.

This concludes the first and most important part of the configuration process.

Making a Google calendar public

The following part of the process involves making a Google calendar publicly viewable. This step is mandatory if you’re using the free version of the plugin, as it can only display publicly viewable calendars. You can skip it if you’ve opted for a premium add-on that allows you to display private calendars.

To make a calendar public, log in to Google Calendar and locate the calendar that you wish to display. Then, click on the three dots next to that calendar and select the Settings and sharing option from the dropdown menu that appears.

This will open the settings page for that calendar. Scroll down to the Access permissions for events section and tick the checkbox next to the Make available to public option. Finally, press the Ok button in the popup window to confirm your choice.

On the other hand, if you haven’t created any calendars previously, you can do so by clicking on the + button. It’s located within the Other calendars section of the Google Calendar main screen. Then, press the Create new calendar option to proceed.

In the following screen, insert the name and description for your calendar, and set the time zone and owner. Then, press the Create calendar button to finish creating it.

Once you’ve done that, you can proceed to make the newly created calendar available to the public as described above.

With that done, the following step is to integrate the calendar with our WordPress plugin. This is accomplished using a calendar ID. To find that ID, click on the calendar’s Settings and sharing link and scroll down to the Integrate calendar section. Alternatively, if you haven’t returned to the previous window after setting the calendar to be public, you only need to scroll down a bit to that section. From there, locate the Calendar ID option and copy the ID that is shown.

Displaying the Google calendar

With this Calendar ID, we can jump straight ahead into the final step of this configuration process—displaying the calendar on your WordPress website. This will require you to create a calendar item using the plugin and integrate the Google Calendar ID you previously copied. To clarify, the calendar item is a custom post type item enabled by the plugin. After you create it within the WordPress dashboard, you can choose from several different ways of displaying it on your website.

To start with, you need to create a calendar item. This is done by switching to the previous browser tab and navigating to Calendars > Add New. Set a name for your calendar item and scroll down to the Calendar Settings. From there, you will be able to edit various aspects of the calendar item, as well as integrate the Google Calendar you previously made public.

Click the Google Calendar tab and locate the Calendar ID option within the Google Calendar Settings that will be displayed on the right. Then, paste the previously copied Google Calendar ID within this field and press the Publish button to create a calendar item.

The Calendar Settings section offers various options for editing your calendar item. You can use the editor to add additional content, some of which will be added by the plugin by default. However, this isn’t necessary and we opted not to add anything more in the editor.

After publishing the calendar item, you will be able to access its page by clicking on the corresponding permalink that will appear next to the calendar item’s name.

This is the easiest of four possible ways that the plugin allows you to display your integrated Google Calendar.

Another way that you can integrate a calendar to pages, posts, and custom post types is to attach it in two predefined places—before the content or after it. This is done using the Attach Calendars section that the plugin creates.

To use it, navigate to Calendars > Settings and open the Calendars tab. Then, locate the Attach Calendars option, select where you want to display the calendar(s), and press the Save Changes button to apply the changes.

By default, the Attach Calendars option will be blank. You select where you want to add your calendar by clicking on the field and selecting the appropriate option from the dropdown that appears. For this article, we added a calendar to pages and posts only, but you can include any custom post types that are registered on your website.

To display the calendar in one of those two predefined places, click to edit a page, post, or custom post type (depending on what you selected previously) and locate the Attach Calendar section created by the plugin. If you’re using the Gutenberg editor, that section will be located on the right, while the Page/Post tab is selected.

Once you find that section, select the name of the calendar custom post item that you created earlier. If you created multiple calendar items, the list will contain all those that are published for you to choose from. Then tick the checkbox next to the desired placement of the calendar item—after or before content—and press the Update button to update your current page/post.

Then, review the page/post where you added the calendar and examine the results. Please note, you will need to repeat the second part of this process for every page/post where you wish to add a calendar using this method.

Another easy way of displaying a calendar item is by using the widget provided by the plugin.

To do this, navigate to Appearance > Widgets, locate the Simple Calendar widget, and add it to your widget area of choice. Within the widget, select the calendar custom post item you want to display, add a title if you want, and press the Save button to update the widget.

When you’re done, review a page/post where this widget area is shown and check the results.

The final way that this plugin allows you to display calendar items is via the [calendar] shortcode. By inserting the appropriate shortcode call, you will be able to display a specific calendar item on any part of your website.

To do this, navigate to Calendars > All Calendars and click to edit one of your previously created calendar items. Then, locate the Calendar Shortcode section on the right and copy the shortcode call within.

If we observe this shortcode call closely, we can see that it contains a single parameter—the post ID of the calendar custom post item. In fact, this is the only parameter that the shortcode accepts.

To use the shortcode, you will need to insert its call within an element that renders shortcodes. For Gutenberg, that is the Shortcode block. To use it, click to edit a page or a post, and add a Shortcode block to it. Then, paste the copied shortcode call inside the block and press the Update button.

The procedure is slightly different if you aren’t using the Gutenberg editor. For Classic Editor users, you can add the shortcode call directly inside the Visual tab of your editor. WP Bakery users can put the shortcode call inside the Visual tab of the Text Block element. And Elementor users can place it within the Visual tab of the Text Editor element. Since we already covered the steps on how to do this in detail in our article on custom shortcodes, we recommend taking a look at it, and especially the section on the use of custom shortcodes.

With that being said, after inserting the shortcode call inside your editor and updating the page/post, you will need to review the changes, just as before.

This wraps up all the ways you can display an integrated Google Calendar using the Simple Calendar plugin. Each of these methods has its pros and cons, reflected in the level of difficulty of implementation and the location where the calendar item can be displayed. You should review them all and carefully choose the one that suits you best.

Finally, you can see how the display of the calendar item we created for this article turned out on the screenshot below. Don’t forget, the plugin also offers a way to edit the view of the calendar item. This is done using the options found in the Calendar Settings below a specific calendar item. With very minimal changes made to those options, this is our result:

Final Thoughts

Google Calendar is an excellent tool for keeping your visitors informed of any scheduled plans related to your website and business. Besides the many practical benefits of using it, it also offers easy integration with WordPress. There’s no time like the present for making tremendous improvements to your website’s organization.

Since the integration process is done using a WordPress plugin, completing it is very simple and accessible to a wide range of WordPress users, especially those with little or no technical knowledge. And while the process may take a bit of time, by carefully following the instructions we outlined in the article, you will be able to display a Google Calendar on your WordPress website in a few steps. Moreover, you can choose from several ways permitted by the plugin to pick the one you find easiest and most convenient to use.