I’ve recently been working with Radiant CMS for a project and needed a calendar of events. None of the existing calendar-related extensions fit the bill so I created one that did.
Find it at http://github.com/davec/radiant-events-calendar-extension.
The Public Calendar
The public face of the website gets a small monthly calendar that can be navigated month-by-month using the previous and next month links at the top of the calendar (the calendar is updated via an AJAX request). To display a calendar, simply add the radius tag <r:calendar/> to the page (you might want to add a section header of some sort — the Calendar title shown here is not included in the output of the <r:calendar/> tag).
The calendar cell of the current day, as known by the server, is highlighted; days that have events associated with them are shown in a bold red font. (Tweak the CSS to your own preferences if the defaults are not to your liking.)
When the mouse pointer is within a calendar cell that has events, a tooltip is displayed with some basic information about the events for the day. To see the details on the day’s events, do as the tooltip says and click on the date. Doing so will render a separate page that contains the details of the day’s events.
The tooltip is normally aligned a few pixels above and to the left of the lower left corner of the calendar cell it’s associated with. However, if the calendar is too close to the top of the browser’s viewport, the JavaScript code that displays the tooltip is intelligent enough to adjust the location of the tooltip to keep it within the viewport.
“Ah, ha!” you say. “What if I place my calendar on the left side of the page? Surely there isn’t room to display the tooltip.”
Fear not, just as with the tooltip positioning adjustments made when the calendar it too close to the top of the page, if the tooltip cannot be fully displayed to the left of its associated calendar cell, it gets displayed to the right.
There’s a potential for trouble if the browser window it too narrow. The JavaScript code does not currently consider the situation where there is insufficient room to display the tooltip on the left and the right sides. If there’s insufficient room on the left, the tooltip is displayed on the right with the potential of having the right side of the tooltip clipped.
The Admin Side
The public calendar, and associated events page, is pulling data from a simple table of events. The admin UI gets an Events tab that displays the list of current and future events.
Events that have already happened are not accessible — you’ll have to dive into the database directly if you want to rewrite history.
The UI for creating new events and editing existing events is straight forward.
Events must have a name and a date, but everything else is optional.
Caveats
This extension works for my purposes, but still has some rough edges. I’m currently using it with Radiant 0.8RC1 but I’ve also done some testing with 0.7.1. I haven’t tried it with any earlier versions of Radiant. If you do, let me know if it works.
Use the master branch for 0.8 and the radiant-0.7.1 branch for 0.7.1.
The calendar display has been tested with Firefox 3.0.10, Safari 3.2.3, IE6, IE7, IE8, and Opera 9.64.
Acknowledgements
This extension makes use of Tim Harper’s calendar_date_select plugin, Geoffrey Grosenbach’s calendar_helper plugin, and Tony Amoyal’s simple_time_select plugin. 1
All of these plugins are included with the events calendar extension.
1 The simple_time_select plugin uses a 12 hour clock. If your users expect a 24 hour clock then you’ll need to do some hacking.
