Revision [2692]

This is an old revision of JwCalendar made by JavaWoman on 2004-11-30 19:54:53.

 

Calendar action


History
GmBowen posted a nice little Calendar action on GmBowenCalendar which drew a lot of comments (and suggestions), and which JsnX proposed to include in the upcoming (1.1.6.0) version of Wikka. I commented that I'd like to see the code "cleaned up" before inclusion, and offered to do that. The result is here.

Different output


Data table markup
The original (including the ultimate original which we've traced the code back to - see the comments on GmBowenCalendar?showcomments=1#comments GmBowenCalendar) code uses a table to present the calendar but the markup is that for a "layout" table, not a data table.

What's the difference? A layout table has nothing but a table tag (table), table rows (tr), and table data cells (td) within the rows. However, a data table is to present data in relation to each other; a calendar clearly is a data table, showing dates in a month with day names labelling groups of dates (and possibly more). In order to show relationships between data, a data table uses not only table data cells (td), but also header cells (th) to label the data, and preferably a caption (caption) that labels what the whole thing is about.

A good article about marking up data tables:

Looking at a common "calendar face" the candidates for header cells and caption are obvious: clearly the (abbreviated) dat names are headers, and the name of the month at the top logically is a caption. That leaves the navigation, however, which I've moved to a separate section at the bottom. While I was at it, I took up DarTar's suggestion for a link (back) to the current month since moving the navigation links to the bottom left a space in the middle.

Making it accessible
Accessible table code starts with proper data table markup, but requires a bit more. To start with, the table should have a summary to explain what it's about; also, the header cells should actually be "linked" to the data cells they refer to, and obviously the navigation links (being just symbols here) need an explanation as well, which is added in the form of a title attribute. Similarly, the data cell for "today" (if shown) gets a title as well (since we should not depend on color alone to convey information). Finally a little trick suggested on an accessibility mailing list: using the abbr attribute on the headers to expand the day names (an inverse of the original purpose of this attribute, but some screen readers used by people with a visual impairment can make use of this).

More about accessible table markup:


Extra functionality


"Dynamic" and "static" calendars
My variant of the Calendar action does all that the original GmBowenCalendar does, and one thing extra:

The result is that you can show a dynamic calendar which "reacts" to URL parameters in addition to any number of static calendars for a specific month.

I'll include code for a static month below - if my proposed code is implemented, you should see here a calendar for March 2006:
March 2006
Sun Mon Tue Wed Thu Fri Sat
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

(Until then you'd just see a calendar for the current month.)
There are 10 comments on this page. [Show comments]
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki