SHARE

So You Want A Calendar, Huh?

Written By

Jan 4, 2005

…use these to jump around or read it all

[The Calendar]
[What Does It]
[Please note]
[Tables Inside Tables]

Why didn’t I think of this sooner?!?! That’s why I read the email from you. You give the best ideas. A new year started (1997 – this was posted in January) and a new year means you need a calendar. I should have seen this coming. But I didn’t. Instead I received like 50 requests to make an HTML calendar. So I did.

The Calendar

December 2001
Another year comes to an end
Sun	Mon	Tue	Wed	Thu	Fri	Sat
						1
2	3	4	5	6	7	8
9	1	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

Isn’t that neat? And it’s not that rough to do. It’s actually just a simple table with a couple of additions. If you don’t know about tables, see So You Want A Table, Huh? and So You Want Advanced Tables, Huh?. Those two tutorials will help you a great deal in understanding this one.

What Does It

Here’s the code I used to create the calendar above. It’s really long winded:

<TABLE BORDER=3 CELLSPACING=3 CELLPADDING=3>
<TR>
<TD COLSPAN=”7″ ALIGN=center><B>December 2001</B></TD>
</TR>

<TR>
<TD COLSPAN=”7″ ALIGN=center><I>Another year comes to an end</I></TD>
</TR>

</TR>

</TABLE>

You can just simply copy what is above and paste it to your page and get the exact calendar as above.

Please Note

(again, this will be a lot easier if you understand tables)

The two top headers were created by entering a COLSPAN command telling the top row to span across all seven rows.
Each cell was created by simply entering in a number for the day. The trick is making sure each day gets the correct numbers. Notice above that each little grouping is seven items representing each week.
You can activate each cell simply by putting an HREF command and activating the number to be clicked upon. Like so:
<TD ALIGN=center><A HREF=”http://www.page.com”>22</A>
The raised look where there are no days is created by offing a <TD> command but giving no data. You must offer the TD to keep the format square, just don’t offer any information.