How to improve calendar event containment?

Question

I'm using FullCalendar on a project where users primarily have a single event that lasts multiple days or weeks, with multiple other events scattered throughout. I've had a handfull of users say that they're confused by which day the events are being shown in, quote:

the [event] line being dark across the board causes your eyes to associate the date number with the wrong date box

and

They are associating the space above the line as the day. So for example they want to set something for the 16th so they click on the space above the 16th which in this example selects the 9th.

I can't "make myself see it" - the dates are in boxes with events that span date boxes. Also, how we have it lain out seems like a pretty standard user interface. Here's a screenshot, explaining, with other interfaces linked below for comparison:

• Outlook 2007
• Outlook 2013
• Google Calendar

Does anyone have any recommendation on how I can reduce the confusion for my users? Some of them suggest moving the event above the date number, which seems very wrong and much more confusing.

Answer 1

You could fix the issues by changing visual design of the calendar:

1. Separate event block from the cell border to clear distinguish event block and calendar border lines.
2. Use lighter color for long events to reduce color distraction.
3. Use shadow in the top righ corner, under the number. The shadow is dissapearing to the center of the cell. It helps to perceive number and appropriate cell correctly.

Answer 2

Well, I think I would have made the same error (it is really confusing).

For me the problem comes from the purple line (which does not look like an event since it is everywhere and we can't see where it starts and where it ends).

You can try to add some margins to the bottom of the numbers, maybe making them bigger would help too. You can also try to align the events to the bottom of the boxes so the blank space is more easily associated.

At least I think you have to make each box clearly identifiable (borders, backgrounds could also be a solution).

Answer 3

You can have a look at mobile and tablet implementations of calendars to draw some ideas. I have seen so far the following:

• Having all continuous events on top of everything, e.g., in your example a purple line would be below December, or
• Breaking continuous events in multiple daily events, so that each day in your example would have a separate event.

It's interesting you mentioned Google Calendar, as between platforms they actually use all 3 designs (desktop, mobile, tablet respectively).

Depending on your setting/application, you might also want to change the default view into week in order to help the users get used to having the date on top of its visual container.