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.
that's all cool & great js , thank you very much for sharing.
Can you give me favor by sharing this js on my JavaScript library?
Awaiting your response. Thank
I've uploaded my utility function on your site. Let me know if the upload is successful. Thanks for the comment!