Event Calendar

Problem summary

The user wants to find events of interest happening in a certain period of time. Events need to be presented to users in a visually concise model that abstracts date and time.


No items found.


Separate content into meaningful buckets of time. Organize events into groups of “tonight”, “next week”, “next month”, or merely September or October. Show more details for an event as it nears today and focus on scannability and filtering the further away it is.

The most common ways to browse an event calendar is either through a text list of events, through a month table, or a combination of both.

The text list is great for providing a view of events for a given period of time: for a certain day, week, month, or simply the nearest future. With a packed calendar, it can however be overwhelming to get and overview of everything.

The calendar box (month table) is good for browsing between days and for getting an overview of when the action happens. In isolation it however reveals close to no information about the events in the calendar. Furthermore, the boxed calendar renders almost useless without data. If you only have one or two events a month, the usefulness of the calendar box becomes minimal – left to merely showing when the next weekend is up.

When combined, the calendar box can be used as a device for navigating through periods of time, while text lists can show details. Again, the boxed month calendar renders useless if you only have 2 events a month, where you might be better off with a mere list of years or no time navigation.

The elements of an event list

For an event calendar to work, you must provide a range of different types of information for it to be useful. It all depends on the context. If you are listing concert events then ticket prices, availability of tickets, and band name a important. For a conference calendar, the presenter, room name, conference track name, and duration of the talk might be important.

Regardless of the context, there seems to be some details that are always important:

  • Title of the event
  • Date of the event
  • Start time
  • Location
  • Organizer
  • Description of the event


An event calendar is a list of time-based items. Their base in time is a great tool for grouping, filtering, and sorting.


Do you need to use this pattern in your project?

This  and others patterns are available and ready to use in this massive Wireframe Bundle. Suitable for a wide variety of projects: Website and landing pages, Ecommerce, Dashboard, Flowchart and iOS.

Huge Wireframe Library Collection