Today I'm going to show you how to create a stylish HTML + CSS calendar. Not that it's a big secret or anything, but maybe it will give you some ideas if you're looking to build one of your own.

First, let's take a look at the HTML code:
In the initial 'table' tag you can play with the settings (border, cellspacing, cellpadding, and width) for slightly different results (if you change the width, you'll want to change the width in each td cell accordingly). I think it looks best without any cellspacing.

Now let's take a look at the CSS classes. The calendar doesn't look anywhere near as nice without them.
The calendar-month class sets the font properties for the header (month/year). The calendar-header class sets the font properties for each of the week days. The calendar-week-day sets the background color for each td cell containing the week days. The calendar-date class sets the font properties for dates 1 through 31. Notice how this class floats the numbers to the left, enabling any surrounding text to wrap around the number. The calendar-holiday class is used for any text that's not within the calendar-date class (i.e. dates). In this example, the aforementioned calendar-holiday class is used to display holidays.

I happen to like the font settings, but you can change the properties to your liking. The calendar-week-day class is only necessary if you want to display a background color for the week days. You can change this to any color you like.

Here's the end result:

March 2008
Sunday	Monday	Tuesday	Wednesday	Thursday	Friday	Saturday
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17 St. Patrick's Day	18	19	20	21 Good Friday	22
23 Easter	24 Easter Monday	25	26	27	28	29
30	31

Tables were originally intended for projects like this one, and frankly I don't know of a more efficient way of putting together a calendar for websites. Tables aren't largely recommended for layout purposes (which is not what this tutorial is about), but in general all browsers still support them. This article was written by David Andrew Wiebe, web designer, graphic designer, guitarist, bassist, keyboardist, songwriter, guitar instructor, and music expert. Interested in winning a free CD? Click here for more info! Questions? Comments? Suggestions? Recommendations? Email me.

Published on February 22, 2008