A Simple Calendar with CSS - Neils Resource Web

Summary of Content

Nothing special here. A simple calendar with no frills, just a bit more CSS work for another site. I've put it here so you don't have to bother to build your own from scratch. Yes I will replace the table framework eventually. March 2007 I've changed my mind about bothering to CSS code the table framework. I've managed it but what a pain. I'm in agreement with most other users that a Calender is tabular data and therefore an obvious candidate for tables 'cos that's what they are made for.

Calender site links
Site Link	Description
● reference sites
Veerle.duoh.com	An excellent article (and subsequent discussions) for a clean looking Calender. 03/07
Dynarch.com	A more comprehensive Calender project. Fully detailed. 03/07

A double mouse click anywhere on the page (except when over hyperlinks) will take you back to the top.

A Simple Calender

Basically nine styles defined in the style section of the header. Three of which are only for event colours and therefore optional.

#cal - General div id { font-family: Verdana; font-size: 130%; color: #000080; text-align:center;}
I've defined the font size as a percentage of the default page font size to ensure scalability.
#cal td - Optional border{ border:1px #000080 solid;}
Put an (optional) border around all cells in the 'cal' div.
.booked - Colour for Booked Days {background-color: #FF0000; color: #FFFFFF;}
.free - Colour for Available Days {background-color: #008000; color: #FFFFFF;}
.unknown - Colour for Past / Unclassified Days {background-color: #C0C0C0; color: #000000;}
.month - Colour for Month / Year Title {background-color: #FFFF99; color: #000080;}
.weekends - Colour for Saturdays / Sundays {background-color: #0000FF; color: #FFFFFF;}
.weeknames - Colour for Monday to Friday {background-color: #000080; color: #FFFFFF;}
.blank - Colour for Empty Space {background-color: #FFFFFF; color: #000080;}

Colour key:

Available

Booked

Unknown

November 2005
Su	Mo	Tu	We	Th	Fr	Sa
		1	2	3	4	5	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Last Update: 05/03/2008 - A Simple Calendar with CSS & Tables - Neils Resource Web

Home	Back	Travel Web		Resource Web		Miscellaneous
Summary	General	Photo	Technical	Web Dev	Workshop

Summary	Links	Reference	Utilities	Design	CSS	HTML	Javascript
Summary	Links	Commands	Reference	Shadows	Validation	Filters	Notes
Workshop
Summary	Notables	Calendar	A Page	Shadows2

CALENDER - Workshop - CSS - WEB DEV. - NEILS RESOURCE WEB