How to Create a CSS Calendar

By Tim Searles

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.

Things You'll Need

  • Text editor

Step 1

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

New Page

Step 2

Create an HTML table. Type the following inside the

portion of the HTML code:
This creates seven blank rows for use in the calendar table.

Step 3

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

portion of the HTML code:

PrevNovember 2009Next

Step 4

Create a row for days of the week.


Step 5

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

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

Step 6

Define CSS for table. Above the

line of code, insert the following: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 7

Define the CSS for table cells. After table CSS definition, model your table cells similar to the following CSS {font: 12px ArialGOpadding: 3pxGO}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 8

Define CSS for links. Give day links a different color than other links. Define styles for rollovers. For example:td a { color: red; } a { color: blue; } a:hover { color: purple; text-decoration: underline; }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 9

Define CSS for month display. Model the following example:td.month { font: bold 14px Verdana; }This gives the month display at the top of the calendar table a font size of 14 pixels, bold text and Verdana typeface.