List Based Calendar v2

Skip all the fancy words and jump straight to the calendar

Background:

I came across Matt McInerney's list-based calendar, which I thought was pretty cool, although I'm not sure a calendar strictly speaking is a list.

I did however see some small room for improvement, so I began playing around with it. Some of the changes I made were:

1. Converted the layout to be em-based instead of px-based
2. Small semantic changes (span converted to p etc.)
3. I made the style switcher work for users with javascript disabled - and through the browsers menu (if supported)
4. Minor graphical change (day changes color on mouseover
5. Made sure that the page validates

Switch layout

Calendar View

List/Agenda View

The calendar

January 2008

• sun
• mon
• tues
• wed
• thurs
• fri
• sat

• 1

  tuesday

• 2

  wednesday

• 3

  thursday

• 4

  friday

  do this and this and this and this

• 5

  saturday

  Hey, we also have to do that

• 6

  sunday

• 7

  monday

• 8

  tuesday

• 9

  wednesday

• 10

  thursday

• 11

  friday

• 12

  saturday

• 13

  sunday

• 14

  monday

• 15

  tuesday

  don't forget the milk

• 16

  wednesday

• 17

  thursday

• 18

  friday

• 19

  saturday

• 20

  sunday

• 21

  monday

• 22

  tuesday

• 23

  thursday

• 24

  wednesday

• 25

  friday

• 26

  saturday

• 27

  sunday

  meeting at 7pm

• 28

  monday

• 29

  tuesday

• 30

  wednesday

• 31

  thursday

Thoughts...

Obviously this calendar isn't perfect:

• It doesn't work in IE6 because it utilises the :hover and the :before selector.
• Like I said: a list might not be semantically correct - if you view the page without any styles you will see what I mean
• It doesn't print well in the calendar-view
• If you super-size it and hover over an event at the bottom of the calendar, you might not be able to see the actual reminder, as it will probably out of the viewport
• Insert your own reason here ;) I'm sure there are plenty...

If you liked this, go ahead and Digg it or add it to Del.icio.us

Maybe you will also like my demo page of CSS Selectors and Pseudo Selectors?