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


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:

our 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.

3 Answers 3


You could fix the issues by changing visual design of the calendar:
enter image description here

  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.
  • I think you addressed the biggest problem with #2. The dark purple color is very prominent in the visual hierarchy and can be mistaken for a header. Jan 10, 2014 at 8:11
  • I really like 2 and 3. As for 1., there's a UI difference between an event separated from the cell border and one that isn't - it indicates that the event extends beyond that day.
    – xdumaine
    Jan 10, 2014 at 12:32

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).


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.

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.