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.
Method 1: Google Calendar Events Plugin For Public Calendars
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.
Method 2: All-in-One Event Calendar Plugin by Time.ly
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.
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.
You are very welcome Devender. Glad you liked it. Good luck!
Hello Kumar,
How are you? Nice post about intigrating Google Calendar In WordPress And Making It Responsive. Will it work on Genesis Framework?
Yes, it has nothing to do with Genesis or any other framework. The method will work on any WordPress website as long as you do it right.
This 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!
Hi Carolyn,
Glad to hear from you! Happy Holidays!
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.
Regards,
Kumar
Hi Kumar,
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.
Be certain to make the day great!
Always,
Terungwa
Hi Kumar,
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.
Thanks again!
-Donna
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.
Thanks for these great tips about adding Google calendar to WordPress blogs. Could be really handy for my consulting gigs.
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.
Hi Kumar,
I just know that something like Google Calendar was exist, even with the plugin.
Although this plugin is not yet useful to me, but thank you for the information you provided. It was very useful! 🙂
Do have a wonderful week ahead.
Regards,
Nanda
Hi Kumar,
It is very useful plugin you shared about All-in-One Event Calendar Plugin by Time.ly, I really enjoy using these think in our client website, it provides them to mention the day to day activity also help full to remind them for any important work which is pending on the way, WordPress is mainly famous for due to it’s user friendly nature, A non tech person also can use a WordPress blog, and plugins are used to reduce the effort of user. And also it is very cost saving too.
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 calender
Hello 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 🙂
cheers
Hi Kumar,
I am new in this field and want to know how Google calender is useful if we add it on WordPress please guide me