Bryan Clark

With an hour or so of downtime during the Calendar Face 2 Face meeting this week I started a little CSS hacking of the Lightning Calendar extension.  My goal was to change improve the visual effect of the month view into more of a heat map than a listing of all your events for the month.  I believe the month view should only be answering the question, “What days am I busy, what days am I free?”, while avoiding answering every other possible question.

Old Calendar Month View

Here’s a screenshot of a day in the current month view.  There are dark drop shadows for each event listed, as well a (visually alarming) alarm bell for every event that has an alarm.  The borders are thick 2px lines with a dark color that overwhelms the board.

Effectively there is a lot of visual noise happening with all the different background and dark border shading that makes the view always appear somewhat cluttered.

Drawing the Eye

When you start shading the the areas of the calendar in a darker shade than they were before you can begin to see the visual effect created and where they eyes are drawn to.  Places and things that aren’t as important as others.

Plus the extra visual information that is provided in some of the shading isn’t always necessary in the month view.  For example, off month days are now indicated by a lighter shade of font color in the date text instead of a dark background color that makes them look important instead of additional.

Calendar Month Hack

In this screenshot of a single day in the new hacked month view you can see that the borders of days changed to a very light 1px color and the date numbering has been lighted up as well.  I put in a slight background shade for the top border as well to give it some separation (not completely necessary).  The colors and stacking of events in a day provides the necessary separation that the dark border colors were giving before.

In general everything has been flattened so the visual effect is about the colors of the calendar events drawing your eyes to the areas they exist in the most, while the empty parts of the calendar look much more open.

Designer code can be had at bug 430382 and you can see a full month view patch screenshot from there as well.

Next Steps

Start changing the timed events such that they don’t look so visually loud on the board.  Time events, ones that range for a certain time during the day, should appear to be less than an all day event on the visual landscape.

Further Improvements

The text for calendar events is obviously much too verbose.  You can see in the above screenshot that 08:30 AM could easily be changed into 8:30 and still provide the same information while taking less space.

Christian has much more work done for Improved Events and Tasks as well as others areas, all of which need to be merged.