Simple Calendar Creator

This script can be used to create simple calendars on your page like this:

Installation:

First, copy and paste the following line of code in the <HEAD> section of your page:

<script language="javascript" src="calender.js"></script>
Next, you need to make the script write out the HTML to make the calendar(s). The way they look is based on stylesheets so there aren't too many parameters to pass to the actual calendar creating function. The example at the top of the page was created with the following code:

<script language="javascript">
document.write(buildCal(4,2003,"main","month","daysofweek","days",0));
</script>

You set up a set of Javascript tags wherever you want the calender to appear and then put the code to create the calendar inside the document.write() javascript function. This is a little more complex than it needs to be, but it allows a little more flexibility, as I will show later on.

The highlighted parameters in the example code are explained below:
- 4 = The month number you want to display; in this case, April.
- 2003 = The year you want to display; in this case 2003.
- "main" = The CSS classname which controls the calendar's size mostly. You can add other items but NS4 may not reflect the settings the way you want.
- "month" = The classname which controls how the centered month & year looks.
- "daysofweek" = The classname which controls how the day letters look.
- "days" = The classname which controls how the day numbers look.
- 0 = The thickness of the border between all cells. 0=no border.

Then, you define four different CSS rules for each section of the calendar and assign them arbitrary (but meaningful) classnames. Below are the CSS classnames and values I used in the example at the top of the page:

.main {
width:150px;
border:1px solid black;
}

.month {
background-color:black;
font:bold 11px verdana;
color:white;
}

.daysofweek {
background-color:gray;
font:bold 10px verdana;
color:white;
}

.days {
font-size:9px;
font-family:verdana;
color:black;
background-color:lightgrey;
}

You can tell pretty much what classname go with which part of the calendar. I suggest you do the same to make it easy for yourself. Just play with the values to get the look you want. Be warned: due to NS4's lackluster CSS support, you may find you can't use some values and have the same look as in IE or NS6. Keep it simple unless you do not care about the people who still use NS4.

More Examples & Advanced Functions

Below is an example of a full year calendar with different CSS classnames:

This one was a little bit more complex. I built a table using javascript with a calender in each cell. Once all the code was generated, I used the document.write() method to write the HTML to the page. Here is the script:

<script language="javascript">

var tc='<table cellpadding=2 cellspacing="0"><tr>';
tc+='<td>'+buildCal(1,2003,"calMAIN","calMONTH","calDW","calDAYS",0)+'</td>';
tc+='<td>'+buildCal(2,2003,"calMAIN","calMONTH","calDW","calDAYS",0)+'</td>';
tc+='<td>'+buildCal(3,2003,"calMAIN","calMONTH","calDW","calDAYS",0)+'</td>';
tc+='<td>'+buildCal(4,2003,"calMAIN","calMONTH","calDW","calDAYS",0)+'</td>';
tc+='</tr><tr>';
tc+='<td>'+buildCal(5,2003,"calMAIN","calMONTH","calDW","calDAYS",0)+'</td>';
tc+='<td>'+buildCal(6,2003,"calMAIN","calMONTH","calDW","calDAYS",0)+'</td>';
tc+='<td>'+buildCal(7,2003,"calMAIN","calMONTH","calDW","calDAYS",0)+'</td>';
tc+='<td>'+buildCal(8,2003,"calMAIN","calMONTH","calDW","calDAYS",0)+'</td>';
tc+='</tr><tr>';
tc+='<td>'+buildCal(9,2003,"calMAIN","calMONTH","calDW","calDAYS",0)+'</td>';
tc+='<td>'+buildCal(10,2003,"calMAIN","calMONTH","calDW","calDAYS",0)+'</td>';
tc+='<td>'+buildCal(11,2003,"calMAIN","calMONTH","calDW","calDAYS",0)+'</td>';
tc+='<td>'+buildCal(12,2003,"calMAIN","calMONTH","calDW","calDAYS",0)+'</td>';
tc+='</tr></table>';
document.write(tc);

</script>
Here is an even more advanced example; it creates calendars when you click the month and year buttons:

Month

Year
The code for this is a bit more complex. First, you put the following HTML into the <BODY> section where you want the calendar to appear:

<table cellpadding="3" cellspacing="0" border=0>
<tr valign="top" align="center"><td width=160>
<div id="dyncal" style="position:relative">
<script language="javascript">
document.write(buildCal(4,2003,"calMAIN","calMONTH","calDW","calDAYS",1));
</script>
</div>
</td><td nowrap>
<form name="f">
<input class="butt" type="button" value=" < " onclick="adjM(0)"> Month <input class="butt" type="button" value=" > " onclick="adjM(1)"><br><br>
<input class="butt" type="button" value=" < " onclick="adjY(0)"> Year <input class="butt" type="button" value=" > " onclick="adjY(1)"><br><br>
</td></tr></table>

Then, you add the following script in the <HEAD> section of the page:

<script language="javascript">

var mnth=4;
var year=2003;

function adjM(I){
if(I){
mnth=(mnth==12)?1:mnth+1;
}else{
mnth=(mnth==1)?12:mnth-1;
}
changeHTML();
}

function adjY(I){
if(I){
year=(year==2030)?1970:year+1;
}else{
year=(year==1970)?2030:year-1;
}
changeHTML();
}

//FUNCTION TO FIND NESTED NN4 LAYERS BY MIKE HALL OF WWW.BRAINJAR.COM
function findlayer(name,doc){
var i,layer;
for(i=0;i<doc.layers.length;i++){
layer=doc.layers[i];
if(layer.name==name)return layer;
if(layer.document.layers.length>0)
if((layer=findlayer(name,layer.document))!=null)
return layer;
}
return null;
}

function changeHTML(){
var el=(document.layers)?findlayer("dyncal",document):(document.all)?document.all["dyncal"]:document.getElementById("dyncal");
var html=buildCal(mnth,year,"calMAIN","calMONTH","calDW","calDAYS",1);
if(document.layers){
el.document.open();
el.document.write('<div class="abc">'+html+'</div>');
el.document.close();
}else el.innerHTML=html;
}
</script>

Basically, the script writes a new calendar to the <DIV> element everytime you change the month or year. Of course this could get more complex, but you get the idea.
These last two examples were just to show a couple of things you could do with this script if you wanted. The output of the calendar creator is quite modular and was designed for this reason.