Easy WordPress and Google Calendar Integration
Google Calendar was meant not only to make your life easier with a free, easily-accessible online calendar. You can also use Google Calendar to collaborate and share your events and online activities with other people. But for some, it’s a bit complicated to have to ask others to view your Google Calendar from their own accounts. If you’re a WordPress blogger or a webmaster running a site that uses WordPress as content mangement system, you can easily add your Google Calendar entries on your blog or website.
There are actually several ways of including Google Calendar content on websites, such as direct embedding (more on this later). But I recently discovered a useful WordPress plugin that lets you display your Google Calendar entries on a WordPress blog without much effort. What’s great is that you’re not stuck with the default Google calendar views. You are free to format the event list in any way you want.
The plugin is called wpng-calendar and is accessible via Google Code.
First thing you need is a Google data API code, and you would have to sign up for one, where you have to include the specific URL of the site/s you will be using the plugin for.
Then download the plugin, extract the plugin files, and then upload these to your /wp-content/plugins folder. I’m assuming you know how to do this. Otherwise, please refer to this tutorial. Be sure to copy the entire wpng-calendar as a subdirectory of /wp-content/plugins (such that the actual plugin scripts are under /wp-content/plugins/wpng-calendar).
Now once your plugin has been uploaded, you would need to activate it from within your WordPress control panel, under the Plugins tab.
Once you’ve activated the plugin, you would then have to edit the plugin options under the Options - WPNG Calendar Plugin tab.
Simply paste in your GDATA API key on the appropriate box, and then the public URL of the calendar you want to display. You can get this under Calendar Settings from within Google Calendar
You can use the XML link from the Calendar settings for the particular calendar you want to display. Be sure to use the /full feed instead of /basic.
To display your calendar, you have two options.
First you can display it as a page, using the WordPress custom field. Here you write a new page with the appropriate title and page slug (which goes after your site URL, if you’ve set this up to appear in permalinks).
Create a new custom field with a title show-wpng-calendar. The value should then be the number of weeks you want displayed.
The calendar events would then appear in the WordPress Page you have created. Be sure to set the desired number of weeks to be displayed on a single view, so you get exactly what you need.
Alternatively, you can use the Widget that comes with the plugin. Use this if you’re already using Widgets to organize your sidebars. Under your Presentation - Widgets tab, you simply drag the WPNG Calendar widget to where you want it to appear on your sidebars.
You can edit the heading of this widget, and the number of entries to display.
Once saved, your calendar would then appear on the sidebar.
Don't miss another post! Subscribe by RSS feed or by email today!
Share this post! 29 comments, add yours!
nice plugin. if i had to share my calendar with my blog visitors i would have installed this plugin. must come in handy for corporate blogs.
This sounds like just what I’m looking for on a new local community events site that I’m working on.
I spotted the post on BlogRush, but I can’t see the widget now. Have you taken it off?
Here’s a functioning version of the widget… http://www.10-43.net
Be careful if you’re crossing the mac vs. pc barrier, because the way xml addresses are different. Wordpress is looking for an http:// link, not a feed:// link.
I can’t create a page with a new custom field….i click publish but it doesn’t appear…why ?
I have the same problem as Leonardo. Neither the post link nor the widget seem to work. Do I have to wait?
I have just upgraded, so perhaps it’s a problem with Wordpress 2.5?
I’d read and re-read the instructions on google and it didn’t dawn on me until I read YOUR instructions that I wasn’t going to find a “full” feed address, that I just needed to change the last word of the address from basic to full.
How hard would that have been for them to say? Programmers speak a whole different language!
This plugin is going to be really valuable for a site I’m building! (testing out the various plugins on a personal site)
Thanks again!
Charlie and Leonardo: Where are your page links? In your header? In your sidebar?
I had a bit of a problem with mine… I’d changed my permalinks to use the title as the names and that worked fine for posts, but not for pages, they could no longer be found (got 404 error). Changed back to the default and my calendar page popped right up.
This is great, and I’ve got it working on a work-in-progress blog update for my Rotary club.
However, rather than the formatting shown above, I get (as an example):
Apr 10
* Rotary Lunch Meeting
without the green/gray or other formatting styles shown above. I see there are CSS files, but I don’t think that’s where my problem is. I’m using the display via a widget: how do I expand on the data displayed?
It is a link to the “full” feed address. WP 2.5.
Any help much appreciated!
I’ve got it working! Thanks for this great plugin!
Is it possible to get this plugin to produce a calendar shaped box for the sidebar?
I can NOT get this to work! I have followed each step (repeatedly) but keep getting an error that says:
“The Google Maps API key used on this web site was registered for a different web site.”
I am registering the wordpress blog address before generating the key, but I get this error every time.
HELP!
Sheri,
Re-read your error message: “The Google —MAPS— API key…” That’s probably your problem.
Get the right code here: http://gd.google.com/html/signup.html
thanks Valerie.
I used your link, and went through the steps and I’m getting the same exact error as before.
Hi Sheri,
I’m guessing here, but is your blog hosted at wordpress.com? If so, that might be the problem — perhaps it can’t deal with the fact that you are on a sub domain…
Well, I absolutely cannot get this plugin to work. Is it a problem with WP 2.5. I’m a programmer myself (embedded software, no windows or web stuff) and I’ve configured this thing as best as I can tell to be correct, but NOTHING shows up on my calendar page I’ve created. The widget doesn’t even show anything. The feed works just fine, I can see it in firefox. And yes, I linked to the full version, not the basic. It’s basically not showing up at all.
Set up was quick and clean - widget working in minutes. SUPER .. I have been looking for something like this. Now to tweak events and try adding clickable links ….
Thanks! I have just installed and set this up without any problems.
I’ve been struggling with this one for a day, and it wasn’t until I read this site that I realised I’d neglected to RTFM properly and stuffed up the install - hadn’t put all the folders in my plugins folder. FTP’d up all the necessary files and bingo! Works like a charm!
Great article Peter
I have been looking for a decent wordpress plugin or manual php events solution for ages. I like the idea of using the custom fields for this plugin.
Im going to give this a try, but is there a way to display a calendar view instead of the feed list on sidebar?
Im trying to keep the design and code minimal so would be helpful if you could clear this up…
Can anyone verify that this works on WP 2.5? I have tried endlessly to get it to work. Everything loaded to my WP site. correctly. Api key everything..
I also cant see how to get a full calendar XML, idid change the last word like the poster above mentioned..but did not solve..
Works like a charm with WP 2.5. Only strange thing that happened is that it changed how inline images were displayed on my frontpage. Don’t know how that happened, and as I couldn’t find a way to localize the script to show German dates I had to deinstall after five minutes. Nice plugin anyways!
hi,
I installed it and works on wordpress 2.5 and also works with sites not hosted by wordpress too.
I have a question though, about the customization, I’m trying to change the colors of the box popping out when clicking on every event and I can’t figure out ow to change the colors of the box.
also, does anyone knows if is possible to configure the links titles?
Hi,
I’m up and running now on Wordpress 2.5. I got stuck twice following the instructions. First, in 2.5, you need to go to Settings to find the Calender Widget Tab. Second, I did not understand how to get the “full” feed from Google. I simply changed the word basic to full at the end of the code I copied from Google and it worked.
I hope this helps others.
Regards,
John.
Is it possible to insert the code for wpng-calendar somewhere other than the header?
Or, as least, at the very bottom of the header, like after my “all in one seo pack” info?
Wpng-calendar is great and all, but with its 36 lines of code before my metadata its killing my seo
thanks in advance
any wya to insert this in a specific part of the page and not the entire page … like on a side bar .. i am not sure how to do that
Fantastic. I’m a bit of a Google Fanboy…I’m so glad to have this integration. I would venture to say you are a genius!
To display in sidebar or wherever without using widgets just place this code where you want the dates to appear
widgetListSize = 5;
addLoadEvent(loadCalendarWidget);
change the widgetlistsize to the number of events you want to appear.
Hope that helps
Guess you can’t leave code in the comments but if you activate the widget and then view the html of the page it creates you will see the code to copy into your theme.
I already activated the plugin and Configured the GDATA API key in the plugin options panel, But the WPNG Calendar widget is missing.
I’m using WP2.6.2? Anyone here experiencing the same problem? HELP!
hi,
I have try follow the instruction provided but when i installed it.. it doesn’t show the events. how can i fix it?
I have try to add new page and wiget but both are not working. thanks