When a curator starts up an elmcity hub, one of the outputs is an HTML view of the hub’s aggregated events. It’s just a scrolling list of H3 elements, augmented with a datepicker. In its first incarnation the datepicker was based on the Yahoo datepicker widget. Later I switched to the jQuery UI datepicker, and used it to:
-
Highlight the current date
-
Scroll the page to a selected date
-
Adjust the current date when the users scrolls the page
There was a lot more mileage I could have been getting out of the jQuery widget, though. This weekend I added the following behaviors:
-
Display only those sources — from the list [Eventful,Upcoming,EventBrite,Facebook] — that the curator has included
-
Display the count of iCalendar feeds the curator has included
-
Use hanging indentation to make the list of events more easily scannable
-
Enhance the highlighting of the current date
-
Dim the days that have no events
-
Scroll the page to a selected month when the user clicks the widget’s buttons
-
Disable the widget’s buttons at the beginning and end of the range of available dates
-
Search within the page for the first occurrence of an event matching the search term
One of the places where you can see the new widget in action is at Berkeleyside, the independent local news site for Berkeley, California.
Of course there are many ways to skin the cat. At another California-based hyperlocal site, Menlo Park’s InMenlo, the aggregated iCalendar feed (another of the elmcity service’s outputs) is displayed in an instance of Google Calendar. Note that in this scenario the only view that makes sense is the list (agenda) view, since a hub with any kind of flow will quickly overwhelm the other views.
Not long ago I wouldn’t have thought it possible to make a credible alternative to Google Calendar’s display widget. But with libraries like jQuery UI, along with tools like Firebug and the formidable debugger that’s available in the IE9 preview, I’m able to stretch my modest skills farther than I once could. I’m fairly happy with the current version of the viewer, and now that I’ve started to really get the hang of jQuery I’m looking forward to improving it.
