Design pattern: event calendar (focussing on WordPress)

Event calendars tell users about interesting events that are about to happen. They can also help create an impression of how busy the near future will be. Furthermore, calendars may double as a navigation or filter tool.

Events as blog posts in WordPress

I’ve helped build a number of event calendars for websites in the past, especially for websites based on the WordPress-CMS. For small businesses and organisations who mainly need a website for informational purposes, WordPress is a powerful choice because it is cheap, easy to install, easy to maintain and well supported.

A basic WordPress-based website shows information as a series of blog post abstracts on its homepage, the most recent one at the top and posts getting progressively older as the visitor scrolls down the web page.

A simple way to draw attention to events is to display them as blog posts. WordPress started out as a blogging platform so it’s well suited for this purpose. There are a number of problems with this approach:

• Events don’t necessarily mix well with regular blog posts or news items.
• Regular blog posts are best sorted by publication date, events are best sorted by event date.
• If you wrote about an event early on, it would get pushed off the screen by more recent posts.

In short, people would have to start hunting for your events or your news or both. For that reason it is best if events and blog posts are separated. This is where event calendars come in.

Luckily WordPress offers a lot of plugins for event calendars. Searching for these plugins in the WordPress plugin directory yielded the following number of hits per search phrase: events (1,001), event calendar (314), event list (841) and so on.

Grid type event calendars

If you look at the screenshots from the top results for each search, you will see that most of the event calendars are displayed as classical calendars, that is to say a matrix in which each column presents a weekday and each row a week.

From here on I will call this the grid type calendar.

The grid type calendar has two sub-types, the small grid and the large grid. The small grid is often used in a sidebar or as the mobile version of the large grid in a responsive website. It will only print the numbers of weekdays and if one or more events are taking place on a certain day, this is indicated by highlighting the day number. Users who want to know more about the events of that day need to click or tap or hover over the day number.

Highlights can also be used to display the current day, so you may have two types of hightlight in one calendar.

Such a calendar can help emphasize the busy days and the quiet days. This can be useful if you’re for example hiring out a venue for events. Customers can see at a glance on which days the venue is still available and staff can easily tell when they may be required to work:

Sites of organisations that only host a a few events per year often display a completely empty event calendar if they use the grid type.

What does this signal? That they’re on a break? Is this a zen garden calendar? Has their event plugin broken down? Or worse?

If you only have three events a year, you should maybe use a yearly calender. Even better would be the interface I will outline below. At the very least you should indicate that no events are taking place during a given period, but in case you are using a WordPress plugin, you are unfortunately at the mercy of the plugin manufacturer.

The large grid calendar looks just the same as the small sub-type, except the cells are much larger. A small grid has cells that just contain the day number:

In the large sub-type each cell can contain a little extra information, for instance the day name and links to the first two or three events of the day:

Large grid type event calendars are shown in the main content area of a webpage.

With the grid type event calendar, looking into the future can require an extra action. Let’s say the start of your October is bristling with all kinds of cool events, but today is 29 September and your WordPress website conscientiously shows you only the wasteland of an event calendar of the current month. Your visitors could certainly find out about ‘Funtober’ by using the controls these calenders often have to allow you to scroll through the months, but that’s still relatively cumbersome.

Instead the user should be able to see immediately what events are coming up. A solution that gets used a lot for this problem is to show two grid type event calendars below each other. The first will be the current month in that case, the second will be the next month. Three grid type calendars below each other are also possible: previous, current and next month respectively.

Another option would be to use a grid type event calendar that rolls over into the next month, that maybe shows the last two and the next three weeks in one grid. I haven’t seen this solution in the wild though.

One last problem with calendars like these is that they are not very good at emphasizing important events over lesser events. You might use different colours or stars to call out attention to an event, but within the grid of the traditional calendar there’s not much room to play with emphasis or emotional pull.

A useful application of grid type event calendars online is navigation. On a site that displays hundreds of events per day, a calender can be a quick and easy way to filter on just the events for a certain day. In such a situation you would typically use this as just one of the many filters that visitors can use to find events, though.

To recap, a grid type event calendar interface has the following advantages:

• Can present you with an overview of quiet and busy times.
• Navigation / filter by day.

And these are the disadvantages:

• Inefficient use of space.
• Can get progressively worse at displaying future events.
• Information-poor, to the point of being confusing.
• All events are equal.

For a lot of applications the traditional grid type event calendar falls short. In a scenario where you use WordPress to host information about events this means that also a great number of WordPress plugins fall short.

Luckily, there is a known solution.

List type event calendars

In the past fifteen years I have worked on a fair number of websites that contained an event calendar and all of these sites used the following design pattern.

As you can see, this is a simple list of events. The event that will happen the soonest is listed first, the next event is listed second, and so on.

This list type calendar uses space much more efficiently than the grid type, because it doesn’t require room to show unused days.

Sorting by date suggests that the events that will take place the soonest are the most important. If all other things are equal, then that is not a bad suggestion to make. (If all other things aren’t equal, you might consider using ‘sticky events’ or other ways to emphasize the important events.)

The list type event calendar is better suited for vertical scrolling than the grid type. A list can go on forever and you don’t need to see it all at once. Considering that people prefer vertical scrolling over horizontal scrolling, the list interface is playing to the strengths of the web browser or app.

The relatively large amount of space you get with a list type event calendar allows you to do a number of desirable things. You can show photos. You can display a Buy button, or “Make a reservation” (never get between your customers and their wallet). You also have more space for a description and you can display important information about the location of the event (“do I have to travel far?”) and the type of event (“would I like this?”).

This design pattern is not without its weaknesses. For one, the time between events does not jump out at you. If you have three events this week and the next event after is in five months, the interface fails to make this apparent. Your users have to compare the dates in the event boxes to find out. A couple of visual tricks can be imagined that would help to make this clearer to your visitors. Facebook for example uses the following convention:

Facebook groups events by using titles like This Week, Next Week and Later. This could also be Today, Tomorrow and Later, depending on how many events you have to show.

If there are no events coming up, you simply display the message “no events”.

Long, multi-day events present a special challenge for the list type event calendar, especially if you mix these events with single day events. Let’s say you have the space to show three events above the fold and for each day you can show ten month-long events (for example: exhibitions) and three single day events. Which events are you going to show above the fold? How do you decide this? When you are using WordPress with a third party event calendar plugin, does the latter even support your choice?

This is likely a rare problem that can be solved by throwing enough money at it for an interface designer. Most websites needing an event calendar won’t suffer from this problem. Whether you are a band displaying tour dates, a venue displaying concert dates or a sports club displaying meetings and matches, the list type event calendar will likely fit your needs.

So why is it that grid type event calendars dominate WordPress.org’s plugins’ section? My guess would be that this type helps sell the plugin. It’s what people expect to see after they’ve read the word ‘calendar’, even if the list type calendar is just as much a calender as the grid type.

List type event calendars for WordPress, although there seem to be just a few, do exist though.

Apart from event calendars you may also wish to look into event managers. These are much larger tools (often the WordPress plugin is little more than an interface to an external site) that will let you manage venues and speakers/performers and that will let you take care of things such as registration, payments, cancellations and so on.

An example of a simple event list plugin for list type event calendars would be Event List. The not modestly named The Event Calendar provides both lists and grids. Eventbrite is an event manager for which a number of WordPress plugins exist.

Other people talking about calendar design patterns:

• Martijn van Welie
• UI Patterns

Cancelled events and past events

Something I encountered running my own event calendar is the cancelled event. Understandably website owners may be hesitant to show these, because it feels like it reflects on one’s ability to organise an event, but telling parties that the event they were interested in is cancelled, is valuable in itself.

How to correctly display cancellations falls outside the scope of this article (honestly, I have yet to work this one out myself).

Past events are also a topic by themselves. Buttons for purchasing tickets should not be shown, but on the other hand you may wish to display photos and videos of an event. At this point it may become clear that you require an event management system rather than a simple calendar.

If you are using a list type calendar, you may wish to change the sort order for past events; again you want to show the nearer events at the top, and the ones that took place long ago at the bottom. Grid type calendars typically provide the navigational options that makes finding recent events easy (by letting the visitor navigate to the previous month and by displaying previous events in the current month).

Drupal

So far I have been talking about event calendars in general and their implementation in WordPress specifically. The reason for the focus on WordPress, apart from its popularity, is that grid type event calendar plugins abound in WordPress, whereas the often preferable list type seems to be ill supported on that platform (but please do let me know in the comments about the plugins I have undoubtedly missed!).

For Drupal users the news is much brighter. Although I have not looked into the availability of list type event calendars for Drupal, building one from scratch using little more than Drupal’s core abilities is trivial. All you need is the Views module, which is so popular that it will already be available on most Drupal installations. Maybe you also need something to create Date fields with, I haven’t looked at building event calendars on Drupal for a year or so.

(I build websites. Are you looking for a freelance web developer in Amsterdam? Contact me through http://www.brankocollin.nl.)

Update 2023-03-27: the Dutch met uses a rolling calendar to display the perennial average temperatures of the Netherlands for a number of weeks:

This entry was posted on Friday, April 28th, 2017 at 7:52 pm and is filed under Web design + usability. You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.