Google Calendar Widget
Updates
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 1st, 2009 at 6:25 pm
Hi, It would be nice to use your plugin, however, I’m having trouble displaying it. I followed the instructions, copied the xml address from google calendar, pasted and changed the back-end from “basic” to “full”
Any ideas?
December 5th, 2009 at 2:39 pm
I really like this plugin and it’s great, but I’d really like to style it a bit. Any ideas how to float the date on the left and have the event on the right in line with the date?
December 26th, 2009 at 8:06 pm
Hey there, Im having the same issue as Leo. Any suggestions?
Im using the following address:
http://www.google.com/calendar/feeds/chicagocleanenergyalliance.org_n6gvmssr10sk25i7c7uo03ltks%40group.calendar.google.com/public/basic
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 7:19 am
Hey:
What code would I need to use to embed this into a page that isn’t widget-ready?
Thanks.
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 24th, 2010 at 6:56 am
I seem to be having a problem actually retrieving the information from my Calendar. I’ve followed the instructions, but whenever I look at the main page I just see the twirly icon indicating that it is working to retrieve data, but no calendar information at all. Do I need some sort of API key?
Thanks for your help,
Chris.
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!
March 22nd, 2010 at 7:56 am
Hi there,
I am getting page errors saying that the google client is not valid….
Any thoughts?
Cheers
James
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 19th, 2010 at 4:12 pm
hmm, maybe something it wrong on my installation because it is not opening and closing any window.
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 8th, 2010 at 5:37 pm
My wordpress theme does not support widgets. How can I manually add your widget to the sidebar?
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 13th, 2010 at 1:36 pm
it does not seem to work for private feed.
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!