How to Create a CSS Calendar

Calendars are often used for selecting dates for appointments, airline flights, hotel availability and when to send e-cards. Usually you see calendars in a table format including six or seven rows and seven columns. In a service-based website you will see an option to switch the month and/or year of the calendar you see to select an available date for a service. HTML forms the structure of the calendar while CSS helps create the look and feel of the calendar.

Step

Create an HTML file in a text editor. Open a new file and save as .html. Type the following to begin a webpage:

Step

New Page

Step

Create an HTML table. Type the following inside the

portion of the HTML code:

Step

Step

This creates seven blank rows for use in the calendar table.

Step

Create a row with links and month display. Type the following code inside the

portion of the HTML code:

Step

PrevNovember 2009Next

Step

Create a row for days of the week.

Step

SuMoTuWeThFrSa

Step

Create rows for calendar days. Insert code to add rows of calendar days for that month. See the following example:

Step

1234567

Step

Five or six rows of this format may be needed depending on when calendar days fall.

Step

Define CSS for table. Above the

line of code, insert the following:

Step

Step

This gives your table a one-pixel black border and fills the width of the page. Define width in pixels if you have exact measurements (i.e. width: 500px;).

Step

Define the CSS for table cells. After table CSS definition, model your table cells similar to the following CSS definition:

Step

td.day { font: 12px Arial GO padding: 3px GO }

Step

This gives all table cells with the class of “day” three pixels of padding on each side and a font size of 12 pixels and a font face of Arial.

Step

Define CSS for links. Give day links a different color than other links. Define styles for rollovers. For example:

Step

td a { color: red; } td.day a { color: blue; } td.day a:hover { color: purple; text-decoration: underline; }

Step

This defines all day links as blue and all other table cell links as red. A user may click a specific day to choose the day he wants to check into a hotel or the day he wants to fly out of a city. The third example gives all day links a purple color when hovered over and it underlines the day.

Step

Define CSS for month display. Model the following example:

Step

td.month { font: bold 14px Verdana; }

Step

This gives the month display at the top of the calendar table a font size of 14 pixels, bold text and Verdana typeface.