With a calendar on the website, you can easily show your WordPress website visitors what events and schedule your business is following in a particular month or week. Plus, it becomes more useful if you embed Google Calendar in WordPress.
Google Calendar is a nice way to create events and follow a particular day of the month, such as holidays, national day, or popular event from history.
Then showcase those events and special days easily to the audience.
Making your website more open and approachable when it comes to providing users and employees information about what kind of ideas and environment your business practice.
Don’t know how to embed Google Calendar in WordPress?
This tutorial will help you display Google Calendar on your website. The methods include embedding Google Calendar using HTML and few plugins that are available for free.
Method A — Embedding Google Calendar in WordPress Without Plugin
Website designers or WordPress users who don’t prefer to use plugins every now and then always try to look for ideas that can help them develop functionalities on their website without a plugin.
Therefore, the following method will help them embed Google Calendar in their WordPress site without using the plugin.
1st — Embed Google Calendar in WordPress Using HTML
For most web designers, the straightforward way to create something on the internet is to use HTML. And the same is true when it comes to embedding Google Calendar in WordPress without using any plugin.
Though, in this case, users won’t have to code anything. What they need to do is go to the Google Calendar and follow the below steps.
Step 1 – Sign In to Your Google Calendar and Create a New Calendar
After opening the Google Calendar, login to it using your personal account or company.
Once logged in, go to the gear icon (⚙) and select Settings.
Then, go to the left sidebar, and under the General tab, click Add calendar → Create new calendar.
This will open a new window, where you can add details about your new calendar — like Calendar’s name, description, and time zone.
Once added the required details for your new Google calendar in WordPress, click → Create calendar, and move to the next step.
Step 2 – Change Access Permission of Your Google Calendar for WordPress
Now, after creating a new calendar in Google Calendar, we have to change its access permissions. So, it would become publicly visible.
To do that, go to Settings for my calendars in the sidebar, you’d find your newly created Google Calendar.
Click on it to open more settings, and then go to Access Permissions. Here, you need to tick the checkbox next to the Make available to public.
This will make your Google Calendar in WordPress public and will be displayed to all the users. Now, let’s move to the next step, where we’ll copy the code of the calendar.
Step 3 – Copy Google Calendar’s Integration Code for WordPress
To embed the Google Calendar in WordPress, we need to copy the integration code. In the same settings of your calendar, you’d find the option Integrate Calendar.
Go to the Embed code section and copy your calendar’s code.
Step 4 – Embed Google Calendar in WordPress Using Custom HTML Block
We’ve copied the code. Now, go to the page or post where you want to display your Google Calendar.
If you’re using Gutenberg Editor.
Insert the Custom HTML block.
Then paste the code you’ve copied before.
If you’re using Classic editor.
Switch your visual classic editor to text editor, and directly paste the code the same as the below screenshot.
After pasting the code, publish the post or page, and preview it. In both cases, Google Calendar in WordPress will appear like the following image.
Method B — Embedding Google Calendar in WordPress Using Plugins
If users can embed Google Calendar using the HTML block, then why use any plugin, right?
The answer is straightforward; plugins provide additional options that can help users to customize their Google Calendar in WordPress, which might be hard using the HTML Gutenberg block.
The following Google Calendar embedding ways discuss the use of three plugins, and from those plugins, two would help you display and customize your Google Calendar. However, the third one will not display the calendar, but sync Events, Appointments, and Bookings to it made on a form.
Let’s quickly look at what those plugins are and how we can use them to embed Google Calendar.
2nd — Embed Google Calendar Using Jetpack
When you search on the internet how to embed WordPress Google Calendar, what do you find is that they guide you to do it using the WP Block editor and inserting a Google Calendar Block.
But when you follow those steps and try to insert a Google Calendar Block on your site, what do you find is that there’s no such thing.
Why?
You’d find that in the following step,
Step 1 – Install Jetpack for Google Calendar Block
The Google Calendar block different publishers discuss to insert on your site isn’t a pre-built feature of WordPress and its Gutenberg editor.
To have that on your site, you need to install Jetpack because Google Calendar Block is Jetpack’s part.
And for some reason, if you’re not using Jetpack, then you’d find this instruction hard to follow. Therefore, if you want to follow this step of embedding Google Calendar, you’ve to install Jetpack, and activate it.
Using another security plugin and don’t want to install Jetpack? Then the 3rd method is good for you.
Step 2 – Insert Google Calendar Block and Embed Google Calendar
After installing and activating the Jetpack, go to the post or page where you want to add your Google Calendar.
Then, click Add block, and insert the Google Calendar.
After that, paste the calendar URL or embed code you’ve copied in method A.
As soon as you do that, you’d be able to see your Google Calendar in WordPress using Jetpack’s Google Calendar block.
Now, some users would ask if they can do that using the HTML block, then follow this particular approach.
The simple reason for using Jetpack’s Google Calendar block is that it provides the option to add custom CSS to the embedded calendar, which is not possible in the HTML block. And if you try to alter the code, you might break the calendar.
3rd — Embedding Google Calendar Using Simple Calendar
Why use another plugin to embed Google Calendar in WordPress?
Well, the first reason is that if you’re using another WordPress security plugin, there’s no need to install Jetpack. Or this might cause conflict between two security plugins.
The second reason is that Simple Calendar provides multiple customization options for the embedded Google Calendar such as,
- Designs options according to the theme’s look and feel.
- Calendar monthly grid and list views.
- Fully responsive and mobile-friendly.
- Using simple tags to customize event content display.
- Combine multiple calendars.
Let’s see how we can embed Google Calendar in WordPress using this plugin.
Step 1 – Install Simple Calendar — Google Calendar Plugin
On your WordPress Dashboard, go to Plugins → Add New.
Then, search Simple Calendar and install the following plugin shown in the image below.
Click Install Now and Activate it.
Step 2 – Create Calendar API Project for Simple Calendar
To enable Simple Calendar to display your Google Calendar in WordPress with events and everything, you must first generate a calendar API. To do that, you need to first create a project in Google Developers Console.
Go to Google Developers Console, also known as Google Cloud Platform, as you can see below.
Then in the Dashboard, click CREATE PROJECT.
It will open a new window where you’d be able to input details about the project.
Once added the details, click CREATE, and move to the next step.
Step 3 – Generate Calendar API
The project after being created will appear in the dashboard with an APIs overview. From here, you need to click Enable APIs and Services to open the API library.
Then search for Calendar API, and choose Google Calendar API.
It will further open a window where it’d ask you to enable the API or try it as in the API Explorer, click ENABLE.
Once the API is enabled, it will provide you with the option to create credentials, just click CREATE CREDENTIALS. A new window will appear asking what API you need and what credentials you need. Here, don’t do anything, just simply Credentials in the left sidebar.
It will open a new dashboard to create credentials and delete them, in the top menu. You need to click CREATE CREDENTIALS and then choose API KEY.
A popup will appear like the above screenshot, with your API KEY and option to restrict its use for unauthorized processes. First, copy the key and then click RESTRICT KEY. It will take you to another window where you’ll add details to the API KEY to improve its security.
Here, first, enter the name of the API KEY, then in the Application restrictions, choose HTTP. It will open another option which is Website restrictions. Here, enter your website’s domain where you’re going to use it. For entering a domain name, you can follow the following rules.
Once added the domain names, choose to Restrict key in the API restrictions section, and select Google Calendar API. After this, click Save and move to the next step, where we’ll embed Google Calendar in WordPress.
Step 4 – Configure Simple Calendar
After activating the Simple Calendar, to use it to embed Google Calendar, we must first configure it.
Go Calendars → Settings → Event Sources → Google API Key → enter the Google Calendar API Key you’ve copied in the last step.
Once added to the Google Calendar API, Save Changes. Let’s embed Google Calendar in WordPress.
Step 5 – Copy Calendar’s Public Address (iCal Format) to Embed Calendar
We’ve already created the calendar of WordPress in method A. So, there’s no need to create another. However, in method A, the calendar embed code we copied was for iframe and HTML. Now, to integrate it using the Simple Calendar, we need Calendar ID.
In your Google Calendar dashboard, go to My Calendar (in the left sidebar) → click 3 dots next to your WordPress calendar → Settings and sharing
Then go to Integrate calendar → and copy Calendar ID.
Now, go to your WordPress Dashboard → Calendars → Add New → Calendar Settings (under the calendar editor) → Google Calendar → Calendar ID → paste the Id you’ve copied, then publish the calendar.
That’s it; you’ve successfully embedded Google Calendar in WordPress using the Simple Calendar plugin.
Want to Sync Events, Bookings, or Appointments to Google Calendar?
The above methods will allow you to embed Google Calendar in WordPress effortlessly and in no time. And would display changes you’ll make to the Google Calendar.
However, if you want to sync events or appointments users make using a contact form to the Google Calendar, then these plugins won’t help.
But, there’s a solution.
You can install the Date and Time Picker plugin and integrate it with Google Calendar. It’s a WordPress plugin that converts the input fields into a date calendar and time picker. You can use it with popular contact form plugins like Contact Form 7, Divi Contact Module and more.
Whenever a user submits the form to book an appointment or create an event, you can extract the data in .ics format and sync it with Google Calendar.
An easy way to manage all your events and appointments in the Google Calendar. Try it today, and take more control over bookings and appointments.
Did this tutorial help you embed Google Calendar in WordPress? Let us know what your experience was using it.
