Embed a Google Calendar

Google Calendar is a free calendar application from Google. This guide will show you how to embed (i.e., display) a Google Calendar onto your WordPress.com website.

In this guide

1. Step 1: Obtain the Calendar Embed Code
2. Step 2: Add the Google Calendar Block
3. Example of an Embedded Google Calendar

Step 1: Obtain the Calendar Embed Code

To embed a Google Calendar on your website, Google will provide a piece of code for you to use. To find your embed code, follow these steps:

1. Visit https://calendar.google.com/ and log in if you are not already logged into Google Calendar.
2. On the left side of the screen, locate the “My calendars” section.
3. Click the three dots next to a calendar name and select the “Settings and sharing” option:
   
4. Scroll down to the “Access permissions for events” section.
5. Make your calendar public by ticking the “Make available to public” checkbox:
   

   

6. Scroll down further to the “Integrate calendar” section. Copy the full code in the “Embed code” box. The embed code contains your Google account name, so be sure you’re okay with publicizing that name.

   

   • Alternatively, click the “Customize” button to adjust the calendar details, width, height, color, language, time zone, and more. The embed code at the top of the screen will update with each change, so copy the new code when you have finished customizing the calendar embed.

Step 2: Add the Google Calendar Block

Now that you have your Google Calendar embed code, you can display it on your site by taking the following steps in the WordPress editor:

1. Click the + Block Inserter to add a new block.
2. Search for the Google Calendar block and click it to add it to the page:

For more information, visit our detailed instructions on adding blocks.

💡

Missing the Google Calendar block that is included with all WordPress.com sites? It’s likely you have a self-hosted WordPress.org site — you can install the free Jetpack plugin to access the Google Calendar block.

3. Paste your Google Calendar embed code into the box provided, as shown below:

4. Click the “Embed” button, and your calendar will appear.
5. The calendar may not render accurately in the editor screen, so use the “Preview in a new tab” option to observe how the calendar will appear on your actual site:

6. Optionally, use the Google Calendar block toolbar to align your calendar to the left, right, or center (and wide and full width options if your theme supports it):

Google Calendar block toolbar

If you wish to change the appearance of your Google Calendar embed, such as the width, height, color, language, time zone, and more, return to the previous section and use the “Customize” options explained in step 6.

Example of an Embedded Google Calendar