How to select a small range from a calendar

Question

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?

Answer 1

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?

---

Edit:

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}

Answer 2

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}

Answer 3

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.