Lightning Calendar Month View Hacks

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.

Current Month Day View

Current Full Month View

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.

5 responses to “Lightning Calendar Month View Hacks

  1. I’m really looking forward to seeing these improvements in the future. Although I liked the presentation improvements, I thought that the semi-3D appearance of the appointments distracted from the basics of calendaring. I very much approve of the style of the mock-ups you’ve put forward.

    Another useful thing will be the precedence of all-day events over timed events which was previously lacking.

    Great work.

  2. I was thinking about this the other day. Glad to see someone’s working on it. iCal and Google Calendar are good examples of nice implementations of what you mention. Regards.

  3. Pingback: Paradise Road: Ken’s Blog » Blog Archive » Lightning Looking Good

  4. shane

    I want this, I have been looking for a way to change the day color in month view, I can never see it, a change to orange or anything would be nice, I love the bells for alarms, can you send me how to do this or the code? I would also like the all day edit(non-work days) thing that you did. Thanks

  5. Carolyn

    This is exactly what I am looking for to use on my iPhone. I have used this day color in month view feature for years on my Palm PDA with the program Agendus and can’t live without it. I want to use my iPhone exclusively but can’t until I find something like this that works. Any hope?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



This is the blog personality of Bryan Clark. I'm a designer in a world of open source. This blog reflects mostly writing about Design, Open Source, Economics, Beer, Wine, and Dogs. There's more information about me on this site or you can contact me directly at