How To Embed Your Google Calendar Into WordPress (2 Methods)

Adding your Google Calendar to your WordPress website lets your visitors get an overview of your calendar, upcoming events, and more.

The bonus side is that you can manage that calendar with any calendar app, and you don’t have to use a third-party plugin to manage it.

Let’s get into how you embed it.

Key Takeaways

• Create a Google Calendar Public to show upcoming events.
• Use the embed code from Google’s Public Calendar, and embed it on your website.
• Use a WordPress plugin with the Google Calendar API to embed your calendar.

Method 1: Add Your Google Calendar Via An Embed Code

This is by far the easiest method, but you also have the least control over doing this. But if you’re looking for a plug-and-play solution, then go with this method, and use one of the 3 sub-methods to display your Google Calendars and future events.

Let’s get into it with this step by step guide.

Set Up Your Google Calendar To Be Shared

Before you can add the embed code for your Google Calendar on your WordPress website, you need to set it up in Google Calendar.

Here is a step-by-step guide on how you do it easily in your Google calendar settings.

1. Go to calendar.google.com and ensure you’re signed in.
2. Click on the settings icon in the top right and click on settings.
3. On the left, click on Add Calendar, and create a new calendar.
4. Give your calendar a name and description, and click create calendar.
5. Click on your calendar on the left, and enable: Make available to the public.
6. For methods 1.1 and 1.2, you need to click on integrations and copy the embed code.

Now your Google calendar is set up and ready to be embedded on your WordPress website.

Method 1.1: Add Your Google Calendar Via Gutenberg Blocks

This is super easy if your WordPress website is using the Gutenberg editor.

Simply create a new page or edit the page where you want to add your calendar.

Then you add a new block with the name “Custom HTML”. Here you get an HTML editor.

The last thing you need to do is simply paste the embed code into the block and publish your page.

That’s it, super simple!

Method 1.2: Add Your Google Calendar In The WordPress Widgets

You can also insert your calendar in your widgets, and this works perfectly if you want to add your calendar in your footer or in the sidebar.

Sign into your WordPress admin area and go to Appearance -> Widgets.

Locate the widget area you want to embed the calendar in, and then add a new widget with the name “Custom HTML”.

Give it a title if you wish, and then paste your embed code into the content text area.

You might want to adjust the height and width attributes on the calendar to match your sidebar or footer.

Pro-tip: Set the width to 100%, then it’ll always adjust, and then you just set the height to the number of pixels you wish.

Methos 1.3: Add Your Google Calendar Via Elementor

The last method I want to show you is if you’re using Elementor.

Sign into your WordPress admin area and create a new page or edit your page with Elementor.

On your left, in the search area, search for HTML, then drag over the HTML widget to where you want to embed your Google Calendar.

Then your left side will change for the HTML widget, where you simply paste in your embed code, and then you’ve embedded your Google Calendar via Elementor.

Method 2: Use A Plugin To Embed Your Google Calendar

If you want additional options to customise your Google Calendar design more, then you’ll have to use a plugin. I can recommend two plugins that I tested. They both work very well.

The first plugin is Jetpack, which comes with any WordPress website. If you’re already using Jetpack, then go with this solution.

The other plugin is Simple Calendar, the basic version is free to use, and then they have a premium version, a premium add-on you can use to elevate your use of the plugin.

Use Jetpack To Embed Your Google Calendar

Sign into your WordPress admin area, and if you don’t have the plugin already, install and activate Jetpack.

With Jetpack installed, you get a lot of extra blocks to use in the block editor, including the Google Calendar block.

Simply create a new post or edit your post or page where you want to embed your Google Calendar.

Add a new block and search for Google Calendar.

When you add your block, you have to insert the embed code from the setup section or the URL to the calendar.

But before you do that, you must enable permissions for sharing your calendar. As we did that in the setup section, you’re good to go. And that’s how simple it is.

You don’t get extra control with this widget. It’s just an easier way to add your Google Calendar to your WordPress website.

Use The Plugin Simple Calendar To Embed Your Google Calendar

The last plugin I want to share with you is Simple Calendar, I tested this out just like with Jetpack, and it’s fast and works well.

However, it requires a larger setup with the Google Calendar API, but they’ve made a step-by-step instruction guide on how to do it.

You need to obtain a Google API key to be able to use Simple Calendar, but it’s well worth it if you need additional options to customise your Google Calendar embed.

When you’re through the setup phase and you’ve added your API key, you can pull in your events and combine them with events you create in WordPress using Simple Calendar.

So you need to see Simple Calendar as a combination of your own events from your own Google Calendar and custom events created in WordPress through the plugin.

Wrap-Up: What Solution Is Best?

That’s it. Now you have 2 easy methods to embed your Google Calendar, and if you’re a person who gets booked or wants to show a specific calendar event on your website, go for it.

Remember, you can’t embed a private calendar. Make it public. You do that in the calendar settings.

The first method is for you who just want a plug-and-play solution with no ability to manage the calendar in WordPress.

The second method requires a bit more setup, but it also gives you some customization options for your Google Calendars