Skip to content

Building a Filterable Calendar in Drupal

April 8, 2010

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:

(click the image to enlarge)

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:

  1. 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.
  2. 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:

  • Calendar
  • CCK
  • Date
  • Pathauto
  • Token
  • Views
  • (and a Zen sub-theme)

Any suggestions?

One Comment leave one →
  1. Bronius permalink
    July 13, 2010 6:34 pm

    This Views 2 issue queue item may be of interest to you:
    http://drupal.org/node/473510
    which talks about overriding a template to replace dropdowns with clickable links.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: