Calendars are a tricky thing to build by hand, but they are a perfect example of a Web layout that is appropriate for a table. There is a header row (the days of the week) and there is data in the columns.
This calendar has the following features:
- Week starts on Sunday
- Weekend days are highlighted
- Days not in the month are numbered, and highlighted differently
- Each day can hold as much content as you need - the overflow property keeps the cells all the same height and width.
Windows
- Firefox and Mozilla 1 and 2
- Internet Explorer 7 and 6
- Opera 8.5 and 9
Macintosh
- Firefox and Mozilla 1 and 2
- Netscape 7
- Safari 1 and 2
- Place the text for each day within the <div class="day"> container. This will insure that the boxes stay the same size.
- Style the class ".date" if you want to change the number
- Previous and next month days are styled with the classes "previous" and "next" respectively
- If you don't want the numbers for previous and next months, add the style:
.previous .date, .next .date { display: none; }
- Copy the HTML into a document on your Web server
- Copy the CSS into a document named styles.css and place it in the same folder
- Link to the CSS in the head of your document
- Publish the Web page, CSS, and image file
- The XHTML
- The CSS
- Generate a Calendar from JavaScript @ About.com
You are free to use any of the free Web templates here for personal or commercial designs, either in print or on the Web, excluding items for resale. You may not give away, sell, or redistribute the files in any way. Do not post these files on any another Web site, electronically distribute them, or include them in any package for distribution. If you find these files useful, please include a credit line or a link back to this site [http://webdesign.about.com/]. Terms of use last modified 8/29/2004.
