Eric Meyer

on CSS

cover image
Available now!

Styling an Events Calendar

Project 3

preview image 1 preview image 2 preview image 3
Project files
Project 3 ZIP file Project 3 StuffIt file

Although they aren't common, it's surprising just how useful events calendars can be on the Web. A personal site might use one to indicate when a web log was updated or to show important dates in history. Even more interesting, an organization or community could use a calendar to publicize upcoming and recurring events.

In this project, we'll look at the basic structure of Web-based calendars, explore ways to set the borders between days, and discuss how the days should be classed and identified to give us the most flexibility for later styling. This gives the reader an introduction to making CSS and table work together, and directly styling table elements as well as their contents.

Errata

Page 60

The last sentence of the second paragraph in the section "Creating the Grid" should read: "Therefore, inside the table, the borders between cells add up to be 2 pixels thick, whereas the ones along the outside are only 1 pixel thick."

Page 71

In the two code blocks on this page, the rule for div.date appears prematurely. The div.date rule is first introduced on the next page, in the section "Cornering Our Dates." The two code blocks on page 71 should have read:

div.event {margin: 0.5em;}
div.event span {display: block;}
</style>

div.event span {display: block;}
span.time {font-weight: bold;}
span.loc {color: #555; font-style: italic;}
</style>
Page 73

Figure 3.18 is incorrect when compared to the code in project file ch0318.html. The dates in the Saturday column should look the same as those in the Sunday column, instead of maintaining the white boxes around the numbers. This was due to a typographical error in the project file code that has since been corrected.

Page 74

The comment /* changed the color from #AAB" to "gray" */ should read /* changed the color from #BBB" to "gray" */.