Want to display Google Calendar events on your WordPress website? Essential Addons is one of the plugins that you can use to do so. This plugin allows you to display calendars on your Google Calendar account in an easy way. You just need to connect your Google Calendar to your WordPress using an API and get the calendar ID to retrieve the events calendar. You can then customize the look of the calendar using Elementor’s visual editor.
Wait, Elementor?
Yes. Essential Addons is an Elementor add-on. This add-on comes with a widget that you can use to display calendar events. The calendar can be created manually. Or — as we will cover on this article — you can also display your Google Calendar events. Essential Addons itself is a freemium add-on. You can use the free version to display your Google Calendar events. So is Elementor, you can also use the free version.
While you can use Essential Addons for free, there are several advanced features offered by the premium version, including a widget to create a 360-degree visual tour.
How to Use Essential Addons to Display Google Calendar Events in WordPress
Step 1: Get the Google Calendar API Key and Calendar ID
- Google Calendar API Key
To get the Google Calendar API key, visit Google API Console and login with your Google account. If you have no project yet, create a new one by clicking the dropdown menu on the top side. Click the NEW PROJECT button to create a new project.
Give your project a name and click the CREATE button.
Once your new project is created, select it via the dropdown menu on the top side. Next, click Library on the left panel.
Scroll down to the G Suite section and click Google Calendar API. Click the Enable button to enable the Google Calendar API.
Return to the Google API Console main dashboard (by clicking the Google API logo) and click Credentials on the left panel. Click the CREATE CREDENTIALS button and select API key.
Copy the API key from the appearing popup.
- Calendar ID
To get the calendar ID, visit Google Calendar and login with your account. Hover your mouse over a calendar you want to display, click the three-dot icon, and select Settings and sharing.
Scroll down to the Integrate calendar section and copy the calendar ID.
Step 2: Start Displaying the Calendar
Before getting started, make sure you have installed both Elementor and Essential Addons. Once you are ready, create a new page (Pages -> Add New) or a new post (Posts -> Add New) and edit it with Elementor.
Before start creating the page, set the page layout first by clicking the gear icon in the bottom-left corner. Set the page layout from the dropdown menu on Page Layout.
Add a new section by clicking the pink plus button on the canvas area and add the EA Event Calendar widget.
Go to the left panel. On the Source section under the Content tab, set to Google.
Open the Google Calendar option and paste the API key and the calendar ID you have just created above.
That’s it. You should see your Google Calendar events. If the calendar is not loaded in the canvas area of Elementor, try to preview your page (by clicking the eye icon on the bottom side on the left panel).
To customize the look of your calendar, you can go to the Style tab. From here, you can set the background of the calendar, the typography (font size, font style, font family, and so on), text color, and so on. Just play around until you get satisfied with the result.
