Assignment 1: XHTML Table-Based Calendar

FEB MAR NOV              
  JUN 1 2 3 4 5 6 7
  SEPT DEC 8 9 10 11 12 13 14
  APR JUL 15 16 17 18 19 20 21
  JAN OCT 22 23 24 25 26 27 28
  MAY 29 30 31        

The Concept

I had been browsing around on the internet and had come across an interesting blog. Back in 2007, this particular blogger had decided to start a mini-calendar contest, which attracted a signifcant response. Anyway, he photographed a number of designs he came up with before reaching his final submission. I was very intrigued by one of his working versions, which is what I replicated above for this assignment.

What the....Deciphering the Calendar

The above calendar is an annual calendar for the year 2010. It is diagonal-based which means you must find the date you are interested in and follow the diagonal to the row of the month you are interested in. To determine which day of the week it is, you then move straight up the column. For example:

Calendar Elements

This calendar started with a 16 cell wide by 8 cell high table. Styles, such as colour, borders and fonts, have been applied through CSS. Vertical date text were created in Photoshop as I had troubles with glyph-orientation-vertical and writing-mode properties. These are CSS3 properties and I could not find good examples to help me through changing my text orientation.

Another area I had trouble with was roll-overs. I had wanted to be able to mouse-over the months which are non-links, and either have the public holiday dates related to that month become an image, or be able to mouse-over holiday dates and have text become available just under the calendar outlining the holiday (i.e. if you mouse-over the number 1, text would appear stating that January 1 is New Year's Day and July 1 is Canada Day). I had come across a demo on creating static-text popups, however, this proved to be difficult for me to accomplish using only CSS.

As I mentioned, the concept of this calendar was what interested me; however, I am not certain that it necessarily meets the graphical component of this assignment? I have therefore included a link to another style which includes more use of images. You can get to that page by clicking on the OCT link in the above calendar.

The Green Light

The XHTML code to develop this page used the strict mode and has been validated. In addition this document is also CSS validated.