Google Calendar Widget
Updates
Version 1.3.2 – Removed unused script includes from admin page. Removed version number from Google hosted files to increase collisions.
Version 1.3.1.1 – Added a stand alone example html page showing how to use the plugin without WordPress.
Version 1.3.1 – Fixed an issue with the loading gif not disappearing if there were spaces in the html.
Version 1.3 – Added event title format strings. Remove duplicate entries when showing multiple calendars with the same events.
Version 1.2 – Added support for automatic expansion of entries.
Version 1.1 – Added support for multiple feeds in one widget.
What is it?
This plugin installs a widget for showing a Google Calendar agenda on the sidebar of a WordPress blog.
How do I install it?
It is installed by downloading and unzipping the files into your ‘plugins’ folder of your blog. The zip file contains the correct directory structure.
How do I use it?
Once installed it adds a sidebar widget called “Google Calendar” that may be dragged into your sidebar.
Each widget can be configured with a URL of the calendar feed, a title, and the number of agenda items to show.
The calendar feed is the URL you get when clicking on the XML icon next to “Calendar Address:” in the Google Calendar settings. See the full instructions here.
Note that you must changed the last word from “basic” to “full”.
Example calendar feed…
http://www.google.com/calendar/feeds/developer-calendar@google.com/public/full
Download
Download the latest version from here.
Support
To report bugs or issues, please post to the WordPress.org support forum for this plugin.
Alternatively, you may post a comment here, but it is easier for other users to see the forum posts and replies, and other forum users may be able to help you with your query there.


November 26th, 2009 at 4:58 am
hi,
thanks for the plugin. i had trouble first, as the settings page in google gives you the url
http://www.google.com/calendar/feeds/developer-calendar@google.com/public/basic
not …/full
could you add a feature to display the time of the event, not just the date?
thanks, keep on!
November 30th, 2009 at 7:49 am
Thanks for this great plugin. The site I’m setting up (see URL) will be in Japanese. I got the Japanese version of date.js and dropped that in. The problem is the date format is not that clear. Is there any way to change the date format so that the full year (e.g., 2010) will appear as well? Or a way to add hyphens between the numbers?
I’m up late trying to figure this out, but I finally decided to ask. Thanks.
December 26th, 2009 at 10:17 pm
Please be aware that this widget only shows upcoming calendar events. If your calendar has no future events, then it will not show any events.
January 21st, 2010 at 2:47 pm
Love this widget. I’m thinking of converting my school PTA website to use it. Any way to display the details of each event (time, location, desc) in addition to just the event title? That would make this a perfect widget for me.
January 24th, 2010 at 12:33 am
Love the look of this widget. My wishlist:
1.) Allow for multiple calendar feeds within same widget/calendar.
2.) Allow for calendar feed to be fed via custom page fields so different feeds can be seen on different pages using the same widget/template placement.
Either of these sound possible in the near future?
Thanks!
January 25th, 2010 at 10:47 am
When reporting problems, please include a link so that I can help.
January 30th, 2010 at 8:08 am
The Google Calendar Widget interferes somehow with the Refraction theme from RocketTheme.com. The site itself works okay. But whenever I activate the plugin, I can no longer alter my theme settings. It means I have to deactivate, alter settings, and reactivate to get everything to work together.
February 2nd, 2010 at 11:35 am
With version 1.1 of the plugin, please make sure that all the URL entries that you are not using are empty. An invalid URL in on of those fields could result in an error that will prevent the calendar from loading.
February 6th, 2010 at 2:07 am
Is there any way to get the html shown properly if it is added to the description, such as an image in the event description.
This works fine when you embed a normal google calender onto a site
February 6th, 2010 at 5:03 am
Hi,
Whenever I add any html to my event description it is changed when it comes up in the widget.
For example if I add a link
Hello to the description in google calender
when it appears in the widget description it becomes
http://www.123456.com/“>Hello
How do I stop this from happening
Thanks
February 7th, 2010 at 8:30 am
Is there a way to have the widget display the day as well as the date?
Example: Sunday, Feb 07
February 8th, 2010 at 2:12 pm
How do you display each event as a bullet?
February 15th, 2010 at 7:39 am
This is a really great plugin. I just wanted to make a small change to the widget, so I disabled the show/hide description function and instead linked to the events url, where you could read the description on a new page instead of down along the sidebar.
Now, I’m in big trouble. I really need the authors help!
I want to add the functionality of thickbox or fancybox, so that it loads up the event description in an iframe. The thing is though I can’t seem to get working with the event title anchors! I’ve done this to the code within ko_calendar.js, to the processFinalFeed() function:
var entryTitle = document.createElement(‘a’);
entryTitle.setAttribute(“className”,”thickbox”);
entryTitle.setAttribute(“class”,”thickbox”);
entryTitle.setAttribute(“href”, “event url here”);
entryTitle.appendChild(document.createTextNode(title));
And from there, if I click the entryTitle it does not trigger the thickbox! I’ve tried everything. I have tested the thickbox and fancybox on the sidebar and it works there, but doesn’t work with your plugin. Do I have to insert the html anchor code manually into the sidebar? Please advise, I will donate in return
Thanks!
February 15th, 2010 at 8:05 am
Hey @Chris:
The twirl is the result of putting in the wrong feed.
I also discovered that, although I have multiple calendars, one of my errors was putting in upcoming dates on the wrong calendar.
Is there a time limit on how far the calendar looks in the future?
Thanks for your work! I’ve got it running and it’s really nice.
–pete
February 16th, 2010 at 6:51 am
Hi! Nice job on the plugin.
I’ve been poking around the code and modifying it a bit to suit my needs but there’s one thing I haven’t been able to figure out, that being how could I have the events expanded by default (but still be clickable to collapse)?
Thanks a lot!
February 21st, 2010 at 4:09 pm
Hey. Thanks for the 1.2 update.
I had a couple of nice tweaks that I implemented here locally (and a couple more mixed in that I haven’t yet figured out how to) that maybe you’d consider adding in a future update:
* It’d be nice to have an actual dedicated settings pane where you could also allow changing things like the date format without having to edit any code.
* I have two calendars, and on one I disabled showing the end date/time which lets me have the calendar function like a schedule of events.
* It would be great to be able to have a way for all day events to show up on the same line as the date (so Feb 19 ___ Day) or whatever. This one I haven’t figured out yet.
* I added a View Calendar button that links to the full version of the calendar. It’d be nice though to have a way to view the calendar as a popover (kind of like the original wpng-calendar had the overlays for events, which wasn’t a good idea for events but for the whole calendar it’d be nice)
Thanks again!
March 8th, 2010 at 6:55 am
Hi – this plug in is great for a sidebar summary on my site. I wonder if there is any way to add links to the events that access flyers or other Web sites? That would be really great. Thank you!
April 19th, 2010 at 2:56 pm
Hi, cool widget, it imported the events smoothly.. but one thing isn’t working right. The event title is a hyperlink but it doesn’t work. When you hover over it, there is no actual url but just “javascript:;”
Any ideas?
April 19th, 2010 at 3:37 pm
neon:
When you click on the title it opens and closes the description body. That is accomplished by making it a link that just executes Javascript code (onclick). Unfortunately, you don’t get a very nice mouse over “url” but that could probably be fixed, I just haven’t tried.
April 21st, 2010 at 11:58 pm
I have used the plugin and it is fantastic.
Have started playing with the layout and design and ultimately would love to be able to modify the links within the description to look a little nicer than simply the full url.
May 24th, 2010 at 4:52 pm
When I activate the plugin, I get a message saying I need to get a new Google Maps API key. I have a WP Gmappity plugin running.
May 25th, 2010 at 6:55 am
The plugin uses the Google API, but does not provide a key, as the new versions do not require it. It is possible that the gmappity plugin is using a version that requires a key.
Try disabling the Gmappity plugin and see if that works.
Alternatively you can provide a key when the plugin is including the Google API
Change this…
wp_enqueue_script(‘google’, ‘http://www.google.com/jsapi', false, 1);
To this…
wp_enqueue_script(‘google’, ‘http://www.google.com/jsapi?key=YOURKEYHERE', false, 1);
If you can provide a link to the problem page that will also help figure out the issue.
June 9th, 2010 at 6:43 pm
Great widget – was wondering if there was a shortcode available for it. I’m interested in placing this widget in the footer of my site if possible.
June 10th, 2010 at 2:59 pm
I don’t know much about shortcodes yet, but a quick search has found something that might work.
Check out http://digitalnature.ro/blog/extend-wordpress-functionality-with-shortcodes/ for some code that you can use to create a shortcode that will allow you to insert any arbitrary widget.
The class for the Google Calendar Widget is ‘WP_Widget_KO_Calendar’
I’m not exactly sure how you set the settings.
June 13th, 2010 at 12:33 pm
I like the plugin and would like to use it for a site I maintain, since it would help lower the amount of work it takes to input upcoming events. Unfortunately, the output is in a much smaller font than the rest of the page and I have been unable to get it to change to something larger.
June 29th, 2010 at 5:15 am
Hi,
Is there any chance you could make it only so one event opens at a time, rather than having to individually close each old event after opening an event, so its similar to the the archives widget on my site.
THANKS
July 1st, 2010 at 3:26 pm
Hi there,
Thanks for the plugin. I was wondering if I could edit the code so that the dates behaved in the same way as the wpng-calendar plugin in that events today or tomorrow would be shown as “Today” and “Tomorrow” instead of the actual dates? How would I do this?
Thanks
Aonghas
July 2nd, 2010 at 8:28 am
Aonghas – take a look at the function buildDate(entry) in ko-calendar.js. It contains the code that generates the date and time strings. Near the bottom of it you will see where the plugin converts the dates to strings using functions like toString(“ddd, MMM d, yyyy”).
I don’t know if the data.js library supports format specifiers that include today/tomorrow (probably not), so you will have to edit that code to check if the date is equal to Date.today() using Date.equals() to compare two dates, and Data.clearTime() to set the clock to midnight so that they will compare by date and not time.
Check the documentation of date.js here
You could also look in the code of wpng-calendar to see how it does it.
July 6th, 2010 at 8:34 am
Hi,
I really like your widget and think it integrates very well with the website I’m working on. However I always strive to have my entire site validate (i.e. I want HTML, CSS etc to be valid) and there are some issues with your code. I would appreciate if you could run a validator (e.g. http://validator.w3.org/) on it and fix the issues reported.
Localized dates would be nice too!
Thanks!
September 1st, 2010 at 1:45 pm
Hi,
Great plugin. I was having issues displaying links though. I have a hyperlink in the calendar entry description, but when it shows up in the sidebar there is an error in the link.
Ex:
http://www.123.com in the description becomes http://www.mysite.com/www.123.com
Thanks!
September 1st, 2010 at 5:09 pm
Hmmm, not sure. It might be a bug with the wiki.js library that it uses to parse markup in the plugin (http://goessner.net/articles/wiky/). Check the readme.txt in the FAQ on how to disable the wiki.js markup.
October 29th, 2010 at 12:30 am
Is there a way to change the font color?
October 29th, 2010 at 9:11 am
The editing the style in ko-calendar.css should allow you to change the font color for components of the widget.
Also, it inherits the color from the widget container, so you can change the color style for all widgets in your theme.
November 20th, 2010 at 12:28 am
thanks for the widget – - works great .. appreciate it a lot
December 4th, 2010 at 5:10 pm
I am trying to figure out how I might be able to use this plugin to display the previous X results instead of the upcoming X results. I’m not terribly adept at Javascript, so I’m not having much success in modifying ko-calendar.js. Do you have any suggestions?
December 15th, 2010 at 8:41 am
[...] also http://notions.okuda.ca/wordpress-plugins/google-calendar-widget/ Author: poco This entry was posted in Calendar. Bookmark the permalink. ← [...]
December 18th, 2010 at 1:07 am
Hi, i really appreciate your widget but i could not make it working in mozilla firefox browser, it shows all the date in extended format, like this:
Sun Dec 19 2010 00:00:00 GMT+0100 (ora solare Europa occidentale)
All Day – Seminar
Mon Dec 20 2010 20:00:00 GMT+0100 (ora solare Europa occidentale)
Mon Dec 20 2010 20:00:00 GMT+0100 (ora solare Europa occidentale) – Lezione
Instead of IE where it shows like:
19 Dicembre
All Day
20 Dicembre
20:00 – Lezione
with hyperlinks that opens.
What could i do?
Thank you
Carlo
December 30th, 2010 at 12:41 am
I resolved the problem, it was my fault, caused by minifying js script. I removed the compression of ko-calendar.js, now it is working wonderfully.
December 30th, 2010 at 2:34 pm
Thank you for this wonderful plugin!
I thoroughly enjoyed studying your well-structured source code, before making some small changes to it to better meet my needs.
This led to some ideas, that I have posted at the WordPress support forum for this plugin.
February 14th, 2011 at 11:47 am
This widget has stopped working for me in Safari and Chrome, anyone have any idea why?
February 14th, 2011 at 11:48 am
This widget has stopped working for me while using Chrome and Safari? Does this happen to anyone else?
February 22nd, 2011 at 4:33 pm
Hi, is there a way to scroll through the months/years? Like arrows next to month? Cheers for your great work pal, Miki
March 1st, 2011 at 7:20 am
The best I can do is get the spinning Icon. I’ve double checked the URL to the Calendar and changed from ‘basic’ to ‘full’. I know ‘nada’ about JS. I believe I need to replace [STARTTIME -][TITLE] with a valid date. Can someone help me out here?
Thanks
mortini
March 1st, 2011 at 9:05 am
If you are having trouble like mortini described, the first step is to open the javascript console of your web browser and look for errors. If you cannot solve them yourself, then please post the errors along with a link to the problem page (if possible).
March 8th, 2011 at 6:50 pm
Plugin works fine with the development link but when I insert the link I want to display I just get a spinning icon..
http://intouchrelocations.com/~irishsoc/
The link I’m using:
http://www.google.com/calendar/feeds/admin%40irishsocietydubai.com/public/full
I’ve also tried:
http://www.google.com/calendar/feeds/admin@irishsocietydubai.com/public/full
Firefox is showing no errors. I have been able to get a simple calendar embed to work. The calendar is set to public.
Any ideas? This plugin suits my needs perfectly adn would love to get it going!
March 8th, 2011 at 11:37 pm
When I access
http://www.google.com/calendar/feeds/admin%40irishsocietydubai.com/public/full
I just get an error “This calendar does not have read public access enabled.”
It isn’t public enough.
March 9th, 2011 at 8:08 am
Hmm I see your point.
http://www.google.com/calendar/feeds/admin%40irishsocietydubai.com/public/basic does load though and this is the address given to me by google.
Obviously your the plugin needs the full feed. Do you know how to enable to full calendar? I can’t seem to find it in the settings or the docs. Forgive me if it’s easy this is my first foray into google calendaring
Thanks for your help!
March 9th, 2011 at 10:02 am
Apparently the issue stems from the fact that we are using google corporate acct through google apps instead of just a regular calendar. Which means the options are a bit different.
The Google Apps admin has it set by default that all users are not allowed to share information with the public unless their accounts are manually checked to have the permissions. We need to get the account that is listed as the *master* for the Google Apps and then give it rights to share all information in the public.
See this:
http://www.google.com/support/a/bin/answer.py?hl=en&answer=60765
Currently they have it set to default to this:
Only free/busy information (hide event details): Only free/busy information is displayed by default, but users can change the settings.
We need it to be set to this:
Share all information: All information is public by default, but users can change the settings. Users can also make particular events private.
90% Sure this is the catch here.
Thanks for your help! looks like we’ve got it sorted.
March 9th, 2011 at 1:27 pm
Great plugin, took some time to set it up right (needs to have all settings ass public as posible (when using google apps)). Is there some way to set the date and time format? like 23:15 17/01/11 instead of 11:15 PM 17 jan?
March 9th, 2011 at 1:38 pm
nevermind, need to learn read readme file first
March 29th, 2011 at 6:31 am
Thank you for sharing the plugin, it’s awesome. I have a suggestion. I have made a website where I want to show the events for one week at a time. Right now the plugin you enter the amount of events to display. I think it would be nice if you could enter a date range and it show all the events within that range. Also it would be great to use this on an actual page. Thanks again for the plugin
April 4th, 2011 at 12:17 pm
Very useful and well designed plugin. Does wonders in very little space. My only question is, is there any way to change the loading image for the plugin? I’m not particularly a fan of the gif, so I was wondering if there are ways to change it. Not a huge issue, but I appreciate the help! Thanks all!
April 13th, 2011 at 4:20 pm
on 1.3 when if my minimum shown calender events is 5 and I have only 2 events on my calender, the plugin will duplicate the second event 3 more times (without the heading) so there is 5 events. It looks like this.
Event 1, Dentist appointment
Event 2, Shop for shoes
Shop for shoes
Shop for shoes
Shop for shoes
May 11th, 2011 at 11:05 am
best. calendar. EVER!!!! I tried 5 calendars and couldn’t get them to work with my config. This one is 1) easy 2) has the best instructions, and best of all 3) It works! Thanks a million!
May 28th, 2011 at 8:37 am
Great widget/plugin. One problem though. The time that displays is 4 hours off! I’ve checked the timezone settings in WP and on Google (and in fact I have another plugin which displays a google calendar and the times are correct), but the times are always 4 hours off (behind). I’m in Eastern Time (US). I use UDT for the Google Calendar Plugin, but for the widget, I can’t find a way to adjust time zone settings.
June 1st, 2011 at 6:36 am
Anyone who has a problem to report – please provide a URL that I can look at to check the error OR an error message from your javascript output OR the html source of your problem page or something.
I cannot help if you don’t give me enough information.
June 2nd, 2011 at 3:12 pm
I believe I’ve followed all the instructions for the plugin, yet the calendar won’t load. There’s just a spinning wheel where the calendar should be, indicating that it’s loading, but it never does. Any ideas?
Here’s the URL: http://www.casahogarvida.com/test/. It should be the widget in the bottom left side of the page. Thanks.
June 9th, 2011 at 5:57 am
Could someone please tell me where I would add a “More Events” link at the bottom of the events. Which would link to the full events calendar page?
I assume I have to add it somewhere in the php?
Thanks
June 28th, 2011 at 11:41 am
Hi,
I have to say, I love your widget, and its configurability. The only setback is, that it has to load every time I reload a page (since it’s on my sidebar). And this is fairly pointless in my opinion.
Could you add the option of caching per session? Or caching for a certain amount of time?
Cheers!
Caspar
July 7th, 2011 at 7:06 pm
Hi there,
Thanks very much for the plugin. Works great except for one important nag – displaying (and providing) links properly. I don’t want to mess around with the code. If you can, please try to provide a fix or solution to this.
Thanks again.
July 7th, 2011 at 7:27 pm
Regarding the link issue, a solution was shown in the readme
Replace the following line in ko-calendar.js
bodyDiv.innerHTML = Wiky.toHtml(entryDesc);
With
bodyDiv.innerHTML = entryDesc;
July 18th, 2011 at 11:16 pm
Is it possible to take code from this and have the result show up on a regular php webpage?
July 22nd, 2011 at 7:17 am
I have added an example of how to use this plugin in a stand alone html page to the plugin. You can see it here
http://plugins.trac.wordpress.org/browser/google-calendar-widget/trunk/examples/stand_alone.html
August 10th, 2011 at 9:04 am
Is there a way to include the name of the day of the week along with the date?
Like
“SUNDAY, Aug 14″
August 10th, 2011 at 9:14 am
Check out the FAQ (http://wordpress.org/extend/plugins/google-calendar-widget/faq/) under “How can I change the format of the dates and times”.
Perhaps something like
dateString = startJSDate.toString('dddd, MMM dd');August 14th, 2011 at 7:51 am
I installed the Google Calendar Widget but the only thing I see is the loading icon.
Can you check this please on http://www.stephaniefocquet.be/wp/?page_id=88
tnx
September 6th, 2011 at 10:48 pm
is there a way to truncate the event title to a certain amount of characters?
September 8th, 2011 at 7:13 am
To truncate the title, take a look in the function replaceTITLE in ko-calendar.js.
If you want to truncate the title string to 20 characters (for example), replace the following line in ko-calendar.js (in the replaceTITLE function)
return title ? strGroup1 + title + strGroup2 : "";with this
return title ? strGroup1 + title.substring(0,20) + strGroup2 : "";I think it will work, but I haven’t tested it.
November 4th, 2011 at 10:35 am
Hi,
I’ve just discovered that in the Stand Alone example if we have less than 3 feeds the loader keeps spinning and no events are loaded, if we have more than 3 feeds, the events are loaded but instead of the links displays the Title of the event what appears is the URL of the 4th feed for each event.
The stand alone example only works with exactly 3 feeds?
Can this be changed/corrected?
November 4th, 2011 at 11:14 am
RTFM Miguel
I’ve just discovered the answer in the Readme, shame on me for not reading this carefully before asking. Sorry about that.
But, can you please consider the option to add the possibility to have more than 3 feeds?