Styling calendars with CSS and JavaScript

Styling calendars with CSS can actually be an interesting task. Usually we start with a simple markup like this:

<table class="calendar" summary="January 2009">

 <caption>January 2009</caption>
 
 <tr>
 
  <th scope="col" abbr="Monday">M</th>
  <th scope="col" abbr="Tuesday">T</th>
  <th scope="col" abbr="Wednesday">W</th>
  <th scope="col" abbr="Thursday">T</th>
  <th scope="col" abbr="Friday">F</th>
  <th scope="col" abbr="Saturday">S</th>
  <th scope="col" abbr="Sunday">S</th>
 
 </tr>
 
 <tr>
 
  <td class="empty"></td>
  <td class="empty"></td>
  <td class="empty"></td>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
 
 
 </tr>
 
 <!-- more days here -->
</table>

The attached styles are also simple:

/* Calendar styles */

table.calendar {
 border-collapse: collapse;
 border: 1px solid #ebebeb;
 border-spacing: 0;
}

table.calendar caption {
 background: #666;
 color: #fff;
 font-weight: bold;
 padding: 0.2em;
 text-align: left;
 text-transform: uppercase;
 font-family: Georgia, serif;
}

table.calendar td, table.calendar th {
 border: 1px solid #ebebeb;
 padding: 0.2em;
 text-align: center;
}

table.calendar td.empty {
 background: #eee;
}

table.calendar td.current {
 background: #ffc;
 font-weight: bold;
}

/* Adding a background image to the caption */

table.calendar caption {
 background: #666 url("caption.gif") no-repeat 0 0;
}

/* Adding a cursor style for the current day */

table.calendar td.current {
 cursor: help;
}

We can also show the abbr attribute as a tooltip by using a few lines of JavaScript:

function showAbbr() {
 var td = document.getElementsByTagName("td");
 for (var i=0; i < td.length; i++) {
  if (td[i].className == "current") {
   td[i].onmouseover = function() {
    var abbr = this.getAttribute("abbr");
    var title = this.setAttribute("title", abbr);
   };
   td[i].onmouseout = function() {
    var title = this.getAttribute("title");
    this.removeAttribute(title);
   };
  }
 }
}

window.onload = showAbbr;

That's all. As you can see, all we have to do is stylize the XHTML table with CSS and add a behavior level with JavaScript. Notice that the above JavaScript code takes into account all the td elements of the page. If you want a finer control over the code, all you need to do is add a reference, for example by using the class name of the table element.