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.

  • Example

    Below is a live example of the widget in action.
  • Google Calendars

    Loading...
  • Example with automatic expansion

    Below is another example of the live widget in action, but with automatic event expansion enabled and the title formatting set to [TITLE].
  • Canadian Holidays

    Loading...

70 Responses to “Google Calendar Widget”

  1. Falschgold Says:

    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!

  2. Andy Says:

    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.

  3. Poco Says:

    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.

  4. Lene Says:

    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.

  5. Jim Says:

    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!

  6. Poco Says:

    When reporting problems, please include a link so that I can help.

  7. Christopher Sykes Says:

    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.

  8. Poco Says:

    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.

  9. T Says:

    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

  10. Alex Says:

    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

  11. Bob Tema Says:

    Is there a way to have the widget display the day as well as the date?

    Example: Sunday, Feb 07

  12. Skunder Says:

    How do you display each event as a bullet?

  13. bboy Says:

    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!

  14. Pete Says:

    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

  15. Jay Says:

    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!

  16. Jay Says:

    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!

  17. Sarah Burnside Says:

    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!

  18. neon Says:

    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?

  19. Poco Says:

    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.

  20. Sam W Says:

    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.

  21. Joe Says:

    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.

  22. Poco Says:

    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.

  23. Mick Says:

    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.

  24. Poco Says:

    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.

  25. Tom B. Says:

    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.

  26. T Says:

    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

  27. Aonghas Says:

    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

  28. Poco Says:

    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.

  29. Jens Says:

    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!

  30. Alek Says:

    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!

  31. Poco Says:

    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.

  32. Lawrence Says:

    Is there a way to change the font color?

  33. Poco Says:

    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.

  34. theMezz Says:

    thanks for the widget – - works great .. appreciate it a lot

  35. Ben Says:

    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?

  36. Google Calendar Widget | Development Site Says:

    [...] also http://notions.okuda.ca/wordpress-plugins/google-calendar-widget/ Author: poco This entry was posted in Calendar. Bookmark the permalink. ← [...]

  37. Carlo Says:

    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

  38. Carlo Says:

    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.

  39. peejay Says:

    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.

  40. Simius Says:

    This widget has stopped working for me in Safari and Chrome, anyone have any idea why?

  41. Simius Says:

    This widget has stopped working for me while using Chrome and Safari? Does this happen to anyone else?

  42. Miki Says:

    Hi, is there a way to scroll through the months/years? Like arrows next to month? Cheers for your great work pal, Miki

  43. mortini Says:

    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

  44. Poco Says:

    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).

  45. worldwisewebs Says:

    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!

  46. Poco Says:

    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.

  47. worldwisewebs Says:

    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!

  48. worldwisewebs Says:

    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.

  49. -36- Says:

    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?

  50. -36- Says:

    nevermind, need to learn read readme file first :)

  51. Heath Says:

    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

  52. Grant Says:

    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!

  53. edward Says:

    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

  54. Rita Petteys Says:

    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!

  55. R Carlson Says:

    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.

  56. Poco Says:

    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.

  57. Joey Says:

    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.

  58. Grace Says:

    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

  59. Caspar Says:

    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

  60. Faz Says:

    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.

  61. Faz Says:

    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;

  62. Ernie Says:

    Is it possible to take code from this and have the result show up on a regular php webpage?

  63. Poco Says:

    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

  64. KJ Says:

    Is there a way to include the name of the day of the week along with the date?
    Like
    “SUNDAY, Aug 14″

  65. Poco Says:

    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');

  66. KM Says:

    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

  67. ls Says:

    is there a way to truncate the event title to a certain amount of characters?

  68. Poco Says:

    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.

  69. Miguel Says:

    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?

  70. Miguel Says:

    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?

Leave a Reply

 

Notions is Digg proof thanks to caching by WP Super Cache