Building a Filterable Calendar in Drupal
One of the things I am working on right now is a calendar of events. This calendar will have events of many different types, for different audiences, so some ability to filter the calendar via taxonomy terms will be important. The display of the information is also very important, not only from a “good usability” perspective, but also from a “good visual/graphic design” perspective.
With that brief description of our goals out of the way, here is a screenshot of what we’ve managed to do so far:
As you can see the events on this calendar are associated with one or more academic disciplines. These disciplines are defined in the site as a taxonomy, with three terms: architecture, landscape architecture, and city & regional planning. This calendar is visible at a URL like http://(sitename)/calendar
So far, so good. But, that brings me to my current problem:
How do I filter this calendar display to only show architecture events? And, how do I do that in an elegant way?
The filtering itself is technically possible already – but there are two problems from a design/UI perspective:
- The user interaction required to filter the calendar is not friendly – select the discipline from a drop-down box, click “Apply”. Ugh. I’d rather simply have a list of links to click on that will apply that filter.
- The URL to achieve the filtering is also not friendly. For only architecture events, for example, the URL is “http://(sitename)/calendar?tid=4” instead of “http://(sitename)/calendar/architecture”. These URLs are potentially going to be included in printed publications or other contexts where simply clicking on a link isn’t possible, so the need for easy recall is legitimate.
In an ideal world, it would be possible to click on the calendar legend on the left side of the screenshot above to filter the calendar. So far, however, we have not been able to achieve that.
Right now I’m thinking about working with tokens (to address the URL problem) and a view (to address the UI problem) that gets displayed as a block above the calendar. I’m secretly hoping that the calendar module somewhere has the capability to do this that I’ve just missed.
If this will help, these are the relevant modules we’re working with:
- (and a Zen sub-theme)