Showing Google Calendar on Divi Websites

Mar 1, 2022 | Divi Resources

5 Easy Steps to Show Google Calendar on Divi Websites

A calendar on the website related to businesses that deal with reservations can avoid double bookings. Even if your organization doesn’t specifically work based on bookings and appointments, you can utilize a calendar on the site. Like, for showcasing events, business hours, and more.

There are several ways that can help you display a calendar on a website. Yet, from those, the one that many web designers prefer is Google Calendar. Why? Because it’s free, secure, easy to embed, and customizable. And in this tutorial, we will see how you can embed a Google Calendar in Divi. Whether for showcasing events or allowing users to book an appointment.

Without any delay, let’s see how we can do it.

What’s Google Calendar?


Google Calendar is a web application that you can use to schedule events and other crucial dates. With this particular free application developed by Google, you can manage your time profoundly like never before. It could be used for personal purposes as well as professionally. So, there’s no issue if you display it on your website.

Google Calendar for Divi

Plus, the features available with Google Calendar make it more than just an online calendar. Some of the useful features are as follows, 

  • Create multiple calendars.
  • Hide your event details.
  • Add attachments.
  • Enable working hours.
  • Email event guests.
  • Add meeting location.
  • Enable desktop notifications.
  • And more.

By utilizing the above and other features, scheduling meetings, events and getting reminders about future activities becomes so easy, and you’d enjoy having them on your Google Calendar. 

Another great thing about Google Calendar is that it can be shared between multiple people. So, if you’re working as a team, let the members know what’s up next. Apart from this, it’s easy to embed it on websites, even WordPress. And below, we’re going to do the same for Divi.

How to Show Google Calendar in Divi?


Generally, there’s a single straightforward method to display Google Calendar in Divi. However, that method alone doesn’t support further customizations other than showcasing the events. So, to make the best out of our Divi Google Calendar, we’ll look at two easy methods that have 5 steps. 

  • Method A – Showing Google Calendar in Divi Using Code Module.
  • Method B – Showing Google Calendar in Divi Using Calendar Plugin.

That’s all we can do to display Google calendar in Divi easily and quickly.

Method A – Using Code Module

In this method, we’ll use Divi’s native code module to display our Google Calendar. Nevertheless, to show Google Calendar, we need to generate some custom calendar scripts. To do that, follow the below steps one by one. 

#Step 1: Create a New Calendar

To display Google Calendar in Divi, first, we need to create it. Thus, in order to do so, visit calendar.google.com, and sign in using your personal or professional account. Once you do that, you’ll see the calendar window as follows,

Google Calendar Window

Now, from here, go to the gear icon (⚙) and select Settings.

Opening settings of Google Calendar for Divi

It will open the Settings panel with all the customization options available for the calendar.

Settings of Google Calendar

Here, what you need to do is, go to the Add calendar menu under General settings. And then click Create new calendar.

Creating a new calendar under general settings in Google Calendar

This will open the new calendar details form. Fill up the information such as Calendar’s name, description, and time zone as required.

Divi Google Calendar details page

After adding the details for Divi Google Calendar, click → Create calendar. It will take a few seconds to be done. Once the calendar is created, reload the page and then proceed to the next step.

#Step 2: Change Access Permission for Divi Google Calendar

The calendar we have created above, by default, is visible to the owner. And if we use it as it is, then it might be only visible to logged-in users. Or perhaps not to anyone outside Google Calendar. Therefore, we need to change its permission so it can be visible to all the users whom you wish to display it.

To change its permission, go to the Settings for my calendars under the same General settings sidebar. Here, you’ll see your newly created Divi Google Calendar. Simply click on it, and then click further on Access permissions for events.

Opening Divi Google Calendar's access permission

This will open a new window titled Access permissions for events on the right side.

Enabling access permissions for Divi Google Calendar

Here, you can change the calendar’s access permission to make it visible for public view. To do that, tick on Make available to public. Once you do that, move to the next step to copy the calendar integration code for Divi.

#Step 3: Copy Integration Code for Divi

We have created our Google calendar for Divi and also made it visible to the public. Now, we need to copy the integration code, so we can display it on our Divi website. From access permissions for the events page, scroll down and stop at Integrate Calendar. Or, you can directly open it from the sidebar.

Opening Integration option

Then, go to the Embed Code section, and copy the available code.

Copying Google Calendar integration code

That’s it; our job at Google Calendar is done. Now, we need to open our Divi website to paste it there.

#Step 4: Insert Code Module

Create a new page or edit the existing one with Divi Builder. Then, once the builder is loaded, select BUILD FROM SCRATCH.

Now, after the Divi builder canvas is there, insert a new row and then insert the Code module.

Divi code insertion for Google Calendar

#Step 5: Paste the Google Calendar Code

Once the code module is inserted, simply paste the Google Calendar’s integration code in it.

Pasting Google Calendar code inside Divi code module

And that’s it; you’ve successfully created a Divi Google Calendar that would display like the below screenshot.

Divi Google Calendar using code module

Method B – Showing Google Calendar in Divi Using 3rd Party Plugin


We’ll use Simple Calendar as our 3rd party plugin to display Google Calendar in Divi. It’s a free WordPress plugin that can help us display Google Calendar in Divi easily.

Simple Calendar for Divi Google Calendar

Moreover, there are multiple features we get when using this plugin, such as,

  • Options to apply website’s look and feel on the calendar.
  • Option to change calendar’s view as list and grid.
  • Mobile friendliness.
  • Use tags to change event content display.
  • And even combine multiple calendars.

With these, our Divi Google Calendar will look appropriate for different occasions. To install this plugin, go to Plugins on your WordPress dashboard. Then, click Add New.

Adding new plugin in Divi WordPress site

In the plugin window, search for Simple Calendar and click on Install Now for the following one.

Simple Calendar for Divi Google Calendar in plugins repository

After installation, click Activate.

#Step 1: Create Simple Calendar API in Google Cloud Platform

To allow Simple Calendar to display our Google Calendar in Divi, we must create a calendar API. And to do that, open Google Cloud Platform‘s console.

Google Cloud Platform

If it’s your first time to open Google’s Cloud Platform, it will ask you to confirm your participation. Simply do that. And, then click on Create Project to generate our calendar API.

Creating project id for Google Calendar in Divi

This will open a new window to enter detail about our project. Simply provide information according to the fields. You can also edit the Project ID if you like. Once added the details, click Create.

#Step 2: Generate Google Calendar API for Divi

After creating the project, we need to generate a calendar API. And to do that, click Go to APIs overview in the cloud dashboard.

Opening Google Cloud Platform's API overview

This will open the API overview, and from here, we need to open the API library. In order to do so, click ENABLE APIS AND SERVICES next APIs & Services bar.

Opening API library

It will open the API Library, as you can see in the following screenshot.

Google Cloud Platform's API Library

Here search for Google Calendar API, and from results, select the following one.

Selecting Google Calendar API in API Library

Then, in the new window, click ENABLE.

Enabling Google Calendar API

After enabling the Google Calendar API, it will provide you with the options to create credentials. Click CREATE CREDENTIALS.

Creating Google Calendar Credentials

Once you click Create Credentials, it opens a new window asking what API you need and what credentials you need. Here, select none and simply click Credentials in the left sidebar.

Selecting Credentials option in the sidebar

It will open the Credentials window with API Keys and other details. Now, look at the top menu, and click on CREATE CREDENTIALSAPI key.

Creating Google Calendar Credentials for API Key generation

It will open a popup with an API key. You need to copy the key and then restrict it. So, unauthorized processes couldn’t use it. Click RESTRICT KEY.

Restricting Google Calendar API key

Once you restrict your API key, a new window will appear asking for further details.

Restricting Google Calendar API and renaming it

Provide details as appropriate, like a name for the key. I’ve used Divi Google Calendar API. You can give your API a name per your requirements. Then, in the Application restrictions, choose HTTP. By doing so, you can tell Google where you’re going to use this API. So, in the Website restrictions option, enter your website’s domain. If you want to know how to use your domain name properly, practice the following rules.

Google Calendar API website restriction guidelines

After adding the domain names, choose to Restrict key in the API restrictions section and select Google Calendar API.

#Step 3: Configure Simple Calendar With the API

We’ve generated our Google Calendar API for Divi; now, we need to configure it with the Simple Calendar plugin. To do so, go to Calendars in your WordPress dashboard. Then, click Settings.

Opening Simple Calendar settings

Then, in the Event Sources tab, paste the Google Calendar API in the Google API Key field.

Pasting Google Calendar API key inside Simple calendar

Click Save Changes. We’re not done yet; we have to copy Google Calendar’s iCal value for our website to display the calendar.

#Step 4: Copy Google Calendar’s Public Address to Embed Calendar in Divi

Go to Google Calendar once again, and open the settings. Then, head over to your calendar created for Divi. After this, open Integrate calendar section, and from there, copy the calendar ID.

Copying Google Calendar's iCal Format address

Open your site, and go to CalendarsAdd New.

Creating a new simple calendar

It will open the WordPress editor to add details about your calendar. You can add information if you like; otherwise, scroll down to Calendar Settings after naming the calendar.

Simple Calendar's Events menu

Here, you can configure your calendar per your linking, such as the Events menu allows you to finetune the calendar’s event starting time.

Simple Calendar's Appearance menu

The Appearance menu allows you to change how the event’s info appears, on-click or hover. Trim event titles, limit visible events; change color and more.

Simple Calendar's Google Calendar Menu

In the Google Calendar menu, we can add our calendar’s address. So, simply paste the address you’ve copied before, and publish the calendar.

#Step 5: Show Google Calendar in Divi

After publishing the calendar. Go to the Calendars → All Calendars. And from the calendars library, copy your calendar’s shortcode.

Copying calendar shortcode

Now, go to the page where you want to display your Divi Google Calendar. Insert the code module, then paste the shortcode, and you’ll have your Google Calendar in Divi as follows.

Google Calendar in Divi using a plugin

That’s it; we’ve displayed Google Calendar in Divi using a plugin.

Conclusion


If you’re thinking that using a plugin to display the calendar would slow your page, then don’t press too hard. The plugin we’ve used is lightweight and won’t slow your website. Even if my words don’t satisfy you, you can try a page speed test; if everything looks good, keep it. Otherwise, you can use method A. However, that will not help you show a nice Google Calendar if you don’t know how to play with custom CSS.

Still, I hope this tutorial helped you a lot and if you have any thoughts or doubts, let me know in the comments. I’ll be more than happy to help you.

Posted By:
kavita

0 Comments

Submit a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments

Submit a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Amazing Divi Woocommerce Layouts for Your Store

Amazing Divi Woocommerce Layouts for Your Store

In today's time, an online store can only make good revenue if it has a beautiful design that is easy to access and looks modern. A digital store with only beautiful sections and design and no easy user interface doesn't work. Therefore, Divi WooCommerce Layouts come...

Top WordPress Event Plugins You Should Consider in 2022

Top WordPress Event Plugins You Should Consider in 2022

If you’re looking to showcase events on your WordPress site, you can utilize the events plugins for that. However, when there are many options available on the internet as well as WordPress repository, it becomes somewhat complex to choose one.  Therefore, we’ve...

Popular on Divi Extended

Divi Plus WooCommerce Extended Divi Child Theme Divi Header Layouts