I'm developing a website that involves the display of a calendar of events.

A calendar that is able to view events for several days interval is what is desired.

My crude interpretation of these is having two fields each for:

  • day,
  • month,
  • Year.

The first three fields (dropdown) will serve as a start day, month, year while the second set of dropdowns will be for end dates (day, month, year), then when form is submitted, I check for matching values in the database and then display.

This method may slightly be inappropriate in a case whereby the difference between start and end dates are so huge. These events are meant for the homepage, thereby, it will be way too much to have huge amount of display for the homepage.

Another way I thought was, having three drop downs, for

  • Weeks: 1 - 5,

  • Months,

  • And Years.

So, only the events for a week (7 days), in a particular month and year. But to achieve this effectively, it means there'll be a week’s column in the database table that will carry the week in which a particular day belongs...

The first option is a bit more dynamic, while the second is a bit strict and static, not to say it's a worse idea.

Could there be a simpler way to display these events, so that the user can only select a small (not necessarily just a week, but similarly small time period) range of dates to display?

  • 1
    I admit, I don't get the problem. Why do you think that having the start/end dates has anything to do with the user experience you are about to create? Let's start with what a user wants and design for that! You shared with us only the information about user who "doesn't want to see too much" and you go for "easy coding and manageability". Commented Sep 20, 2012 at 6:33
  • I've removed some of your references to Coding and DB implementation to try to keep this focused on the UX problem. This is a UX site so we only accept UX questions.
    – JonW
    Commented Sep 20, 2012 at 6:41
  • And hey, welcome to the UX community! :) Don't get discouraged in case you need to throw some more information before getting the right answer. Commented Sep 20, 2012 at 6:41
  • Does the user need to be able to see events during an arbitrary period in the future (e.g. events during a particular week in 2014) or just upcoming events from the present day?
    – Matt Obee
    Commented Sep 20, 2012 at 8:40
  • @mattobee .. Users will be able to see events planned for the future. Events table (day, month, year, event-name, event-venue, event-time) in db has been filled up to 2015.
    – ilp
    Commented Sep 20, 2012 at 10:08

3 Answers 3


So if I understood you correctly. There are two ways of showing events. One standard calendar as the link you provided that gives you an quick overview of what's happening, month by month.

And then there's another view to answer questions like. "I wonder what's happening next week?" Or "What's going on between 7:th to 13:th of October?"

For this I would only show the events. The dates where nothings happens are not that interesting. So why not show it as an agenda? The events are the important information here, not the date.


download bmml source – Wireframes created with Balsamiq Mockups

This also helps with showing information for long timespans. Though if there are hundreds of events in a timespan, you're still out of luck.

For choosing a timeperiod why not just go with two standard date pickers?


Why not go with a accordion like solution? Show just the name of the event and the date and then when the user clicks on the heading, expand the box and show more detailed information. And if you haven't already, take a look at something like jquerys datepicker.


download bmml source

  • Thanks for the answer. The wireframe is exactly what I had in mind, but the problem I forsee is if there are tens of events to be displayed in a small area... If you look at the area it must contain ( www.tapmichiana.org/tap3 - Left Hand Side ) . It's a bit small, and wont contain more that a few events.
    – ilp
    Commented Sep 20, 2012 at 11:47

Could you display one month at a time and simply highlight days that have events associated with them? Allow the user to jump to specific months in specific years. Those highlighted days would then link through to a separate page listing the events that are associated with that particular date.


download bmml source – Wireframes created with Balsamiq Mockups

  • Thank you for the answer. if you navigate to www.tapmichiana.org/tap3/calendar.php you see a bigger calendar there. The calendar on the homepage is meant to be a "view-at-a-glance" there it is only appropraite for it to be displayed on the homepage and not link to another separate page.
    – ilp
    Commented Sep 20, 2012 at 10:59

The answer allows you to completely ignore the form.

Alright, let's assume your calendar is at Feb 2008.

The entire "Feb 2008" area is clickable, which would take you "one level higher" and display all the months in that particular year(months in the year 2008 in this case).

Clicking on "2008" will take you "another level higher" which displays all the years(It's up to you to choose the level of nesting).


To display events, say the user selects a day, you could have a window next to the calendar which displays all the events for that particular day.

Display events

  • Thank you for the answer.. Considering the fact that there will be limited space available on the homepage, it does not give room for viewing events between a start date and end date. Or even a defined week (7 days). Thanks
    – ilp
    Commented Sep 20, 2012 at 13:47
  • 1
    @ilp: If there is not enough room, then there is not enough room, period. On the other hand, making the users operate a set of dropdowns might be overkill, especially considering there is not much space. I'd set a couple buttond: "next week" and "next month" (or whatever was the users usual choices), display the first few events right there, and a "more info" type link taking the user to a page where there is enough room, also featuring a set of controls to enter the start time (no end time, let the user scroll antin she isn't interested any more).
    – Juan Lanus
    Commented Sep 20, 2012 at 17:16

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.