Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

How to Style An Events Calendar in CSS

Events calendars on the Web are surprisingly useful. 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, renowned CSS designer Eric Meyer looks at the basic structure of Web-based calendars, explores ways to set the borders between days, and discusses how the days should be classed and identified to give you the most flexibility for later styling.
This chapter is from the book

Most modern calendars mar the sweet simplicity of our lives by reminding us that each day that passes is the anniversary of some perfectly uninteresting event.

OSCAR WILDE

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.

Project Goals

This time around, our project is to help a community-events organization of a local government get some useful calendars on the Web. These calendars will be generated by a database on the server, so we don't have to worry about anyone hand-coding the calendar. All we need to do is figure out what markup the scripts should produce based on our styling needs. After that's done, we'll take a small, simple calendar of days and mark it up so that it's easy to style. Then we'll tackle a larger, more detailed version of that calendar, which will force us to deal with text content within a given day.

Peachpit Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Peachpit and its family of brands. I can unsubscribe at any time.