How To Add Google Calendar In WordPress And Make It Responsive

Google Calendar is probably one of the most widely used app among users worldwide. Not only we use calendar in our day-to-day life, we also need to show a calendar on our websites often.

Recently, I realized how difficult it can be to add a Google Calendar to your WordPress when you have a responsive website. So, I decided to share my experience with you so I can save some time for you if you need to add a Google Calendar to your website.

When you need a way to integrate a Google Calendar in your WordPress powered websites, you can easily add the iframe code of your calendar that Google provides. However, the problem is, the calendar doesn’t render properly on smartphones and tablets.

If you follow the steps I am going to share, you will be able to integrate your Google Calendar with your WordPress website, embed it in your posts, pages or widgets easily.

This is an elegant method to integrate your Google Calendars with any WordPress website if your Google Calendar is completely public. If you have setup your calendar to show “Busy” status to hide the actual details of the event, this plugin will throw error.

However, if your Google Calendar is public then keep reading the steps to follow:

Install and activate the Google Calendar Events plugin and then a Google calendar events menu item will appear under the Settings menu of your WordPress admin dashboard.

To use this plugin, you will need to get the public feed for your Google Calendar and then add that feed to the plugin.

To get the public feed for your calendar, go to your Google Calendar and click on the arrow next to the calendar you want to share. Click on calendar settings where you will find the XML url of your calendar. Right click on the XML icon and Copy link location as shown in the image below:

Now, come back to the plugin settings in your WordPress admin panel and click on the “Add Feed button”. A screen similar to the one below will appear:

Enter you feed title for the calendar and paste the XML URL you copied from Google Calendar into the feed URL. Click the Add Feed button at the bottom of the page and your feed will be added.

Google Calendar Events WordPress plugin uses shortcodes to display the Calendar grid on any post or page you want. Go to your post or page where you want your Google Calendar to appear and add this shortcode:

[google-calendar-events id=”2″]

Please note that the ID will be the ID of your feed as you would have created. This might be a different number for you.

Once the shortcode is added, view your page and you should see a beautiful calendar with all your Google Events appear on the page which is fully responsive to render properly on every device.

This is my favorite method because the client I was helping had a calendar who didn’t want to share the actual event details on the Google Calendar on the website. Instead, he wanted to show just “Busy” whenever there was an event marked.

Google Calendar supports that feature if you go through Google. However, when you want to embed the calendar with WordPress and make the Calendar responsive, this awesome WordPress plugin comes to rescue!

Instructions are similar to the one we just discussed above. Install and activate the All-in-One Event Calendar plugin. You will notice an Events menu item will appear in your WordPress admin dashboard.

This plugin accepts .ics or xml feeds from the Calendars that support this feature including Google Calendar. You will need to get the public feed for your Google Calendar and then add that feed to the plugin using the same steps we discussed above.

Once you have the calendar feed, you need to add the feed using Events -> Calendar Feeds menu item and then from the choose which page you want your calendar to appear using Events -> Settings menu item.

There are many self explanatory options you can set and experiment while setting up your events calendar. However, once these basic settings are completed, your Google Calendar begins to render in a responsive manner.

Kumar Gauraw

Kumar Gauraw is a Personal Branding & Social Media strategist helping entrepreneurs and skilled professionals achieve personal and professional success by developing leadership and leveraging the power of the Internet, Blogging and Social Media.

16 Awesome Thoughts So Far, Add Yours Now...

Hi Gauraw,
I am first time visiting on your site and got well impressed. 🙂
What an excellent methods to add google calendar in wordpress site with make it responsive.
I “ll definately implement these methods for my site.
Thanks for sharing the useful post.

Twitter:bdtrickzHello Kumar,
How are you? Nice post about intigrating Google Calendar In WordPress And Making It Responsive. Will it work on Genesis Framework?Muminur Recently Posted: Top 5 Secure Dropbox Alternatives

Twitter:wonderoftechThis is great information, Kumar. Although I don’t need a calendar for The Wonder of Tech, I will certainly share this valuable article that will help many others. I can see how others who want to share their calendars probably didn’t even know they could embed them in their blogs!

Well, I don’t use calendar in any of my websites either. But, it so happened that we needed to show real time booking calendar for a rental space company on their website which we were designing for them and they maintained their bookings through Google Calendar. So, we needed to do this for them and found that it wasn’t easy to get a responsive Google Calendar on WordPress without these awesome plugins 🙂

Thank you for sharing this with others. I am sure it will help some people down the road.

Compliments of the season! How are you? It’s long since we last interacted!

Ordinarily, I have no direct use of Google Calendars. However, of recent, I took it upon myself to develop free sites for members of my community who need a site but somehow, are scared of the cost…I guess this knowledge will soon come in handy as I’m pretty sure some of my clients would be interested in such a feature on their blogs/sites.

Thanks so much for explaining how useful adding Google Calendar to WordPress is so simple to do. I, myself don’t use it. But I do see how useful it is when you have to share with a client. Hmm…This may come in handy.

I like the ideal of the “All in one” event calendar especially when working on a project with a client. You have my wheels spinning in my head as usual. lol.

I’m glad to read this article on How to Add Google Calendar in WordPress and Make It Responsive. Its additional learning and many great tips here. It’s very inspiring article. Thanks for sharing this article. It’s such a great post.Sarah Recently Posted: 5 Retail Marketing Ideas

Hey Kumar, thank you for enlightening me with this article. To be perfectly honest I never thought Google Calendar has some better use than my calendar that’s been hanging on our wall for years now. Since technology is already fast forward I know in the very near future I’ll regret if I didn’t know about this now. Keep up the good work and never get tired of posting new discoveries.

First of all i am amazed by your name spelling. It is really stand out in a common name of Gaurav . 😀 and thanks for the perfect guide to install the google calenderBobby Chahal Recently Posted: VITEEE 2015 Syllabus & Sample Questions

Twitter:TonmoyParvesHello Kumar, Thanks for your good article. This is my first time visit on your Blog. I am a newcomer Blogger and that’s why, i always searching for Blogging and Social media marketing tips. To be honest, i find a lot’s of interesting and helpful information by reading your this article and by reading you this one, i become your layer reader. I am going to add this for my own Blog 🙂

Categories

Disclosures

DISCLOSURE OF MATERIAL CONNECTION

Some of the links in the posts on this website are "affiliate links." This means if you click on the link and purchase the item, I may receive an affiliate commission.
Also, some of the products, services, websites, tools or technologies that I review on this website or recommend them here, are from the companies or bloggers who may return the favor by a free product or a free service for using their product and writing a professional review.
Regardless, I write to recommend only the products and services that I like, enjoy using and feel valuable for my readers.
I am disclosing this in accordance with the Federal Trade Commission's 16 CFR, Part 255: "Guides Concerning the Use of Endorsements and Testimonials in Advertising."