The system I am working on allows users to post events and find events they wish to go to. Currently, events are very rarely submitted more than 2 months in advance, so allowing a user to scroll into the future beyond that serves no real purpose. The majority of events are in the system roughly 1 month in advance. This behavior may or may not change in the future as the userbase grows.

My gut says that a calendar is going to be the best way to present a collection of dates that have events so that they can quickly find out what's happening on a specific date, but I am open to other options. Here are the mock-ups I've been exploring (dates that have events will appear different from dates without events, and the starting week is dictated by today's date):

A 5-week Calendar

This looks most like what people expect when they think calendar, but only covers the highest concentration of events. If there are 2 different months filling the calendar, they will be colored differently.

enter image description here

An 8-week Calendar

This covers the majority of events that are upcoming, but looks a little weird to me. Again, different coloring for different months.

enter image description here

An 8-week Calendar, split by month

I am favoring this one, since the divisions feel right, but it takes up a little more space than I was hoping to allocate for the element.

enter image description here

I'm not sure from a technology standpoint how easy it would be for me to pull multiple entire months out of the database. Even if I could, the dates would likely show as not having an event anyway, and would just be a waste of space.

Are there other options I could be exploring or am I on the right track with what I have?

Related: In a calendar, should we show dates that fall outside the current month?

  • You shouldn't present collection of dates, instead present events. Nearest event (~2 weeks) widget (short horizon) and separate page with detailed calendar-event data (long horizon) could be better option. Commented Nov 29, 2013 at 17:15
  • Viewing events by date is not the only aggregate in place in my application. There are multiple views, including chronologically.
    – cimmanon
    Commented Nov 29, 2013 at 17:49
  • possible duplicate of DatePicker UX for single and multiple calendar mode
    – AzKai
    Commented Apr 9, 2015 at 15:04

2 Answers 2


If you really need pure calendar view widget you could try the following idea:
enter image description here


  • Familiar calendar view
  • Economic screen space
  • Amount of events is visible in advance

Still, pure calendar widget works well for dense event flow. You could think out-of-the-box and use more suitable Event Calendar pattern, which more close to @bendataclear answer. There you could find section of a Common pitfalls of event calendar design, which could be useful to you.

Image source: Event Calendar Pattern
enter image description here


A calendar is great for picking a date but I find a calendar a bit tricky to use for displaying information, if you choose a small cell size you have a very small space but a big cell size limits the data you can display. Also as you say you have a lot of wasted space where there are no events.

I would suggest a event list that you can collapse and expand (similar to Facebook's timeline) which would only show years/months where there were events:


download bmml source – Wireframes created with Balsamiq Mockups

  • This seems like a less than ideal way of quickly finding out what's happening on a specific date.
    – cimmanon
    Commented Nov 29, 2013 at 19:45
  • @cimmanon You really need to be clear on the usage, will the users be searching for a specific event? looking at a specific date? looking for an event in a date range or specific month? Commented Nov 30, 2013 at 14:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.