Basic Calender

S	M	T	W	T	F	S

This is just a basic calender which simply sits on your page. It is based on the more advanced version I made previously. Adjust the month and year by clicking the arrow buttons.

This script does not work in Netscape 4. Actually, the calender doesn't even appear in that browser. It does work in IE4+, IE5+, IE6+, and Netscape 6+.

It also features a shadow to give it a small sense of depth. All the settings such as colors and fonts are controlled entirely by cascading stylesheets. The list below gives a brief rundown of the stylesheet classnames and what each pertains to:

calShadow - The dark dropshadow.
calMain - The basic appearance of the calender containing box.
calMonthYear - The appearance of the Month and Year text section.
calHdr - The appearance of the Sunday to Saturday day headers.
calToday - The appearance of today's date in the calender grid.
calText - The appearance of the rest of the days in the calender grid.

Installation:

1: Copy and paste the following style declaration in the HEAD section of your page:
Select all...

2: Copy and paste the following script in the HEAD section of your page:
Select all...

<script language="javascript">
var w3c=(document.getElementById)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns4=(document.layers)?true:false;
var ns6=(w3c && !document.all)?true:false;
var mi=0; var yi=0;
var calA=new Array();
var cal_m, cal_y, cal, calS, now;

function setMonth(incr){
if(!ns4){
mi+=(incr)?1:-1;
if(mi>11)mi=0;
if(mi<0)mi=11;
now.setMonth(mi);
updateCalender();
}}

function setYear(incr){
if(!ns4){
yi+=(incr)?1:-1;
if(yi>50)yi=0;
if(yi<0)yi=50;
now.setFullYear(yi+1970);
updateCalender();
}}

function updateCalender(){
var dim=[31,0,31,30,31,30,31,31,30,31,30,31];
dim[1]=(((now.getFullYear()%100!=0)&&(now.getFullYear()%4==0))||(now.getFullYear()%400==0))?29:28;
cal_m.innerHTML=['January','February','March','April','May','June','July','August','September','October','November','December'][mi];
cal_y.innerHTML=yi+1970;
var offsetD=new Date();
offsetD.setFullYear(yi+1970);
offsetD.setMonth(mi);
offsetD.setDate(1);
offsetD=offsetD.getDay()+1;
for(i=1;i<=42;i++){
if((i-offsetD>=0)&&(i-offsetD<dim[mi])){
calA[i].innerHTML=i-offsetD+1;
calA[i].i=i;
calA[i].o=offsetD;
calA[i].className=((now.ref.getDate()==i-offsetD+1)&&(now.ref.getFullYear()==now.getFullYear())&&(now.ref.getMonth()==now.getMonth()))?"calToday":"calText";
}else{
calA[i].className="calText";
calA[i].innerHTML=' ';
}}}

window.onload=function(){
if(!ns4){
for(i=1;i<=42;i++)calA[i]=(ie4)?document.all['cal'+i]:document.getElementById('cal'+i);
cal_m=(ie4)?document.all["calender_m"]:document.getElementById("calender_m");
cal_y=(ie4)?document.all["calender_y"]:document.getElementById("calender_y");
cal=(ie4)?document.all["calender"]:document.getElementById("calender");
calS=(ie4)?document.all["calenderS"]:document.getElementById("calenderS");
calS.style.height=((ie4||ie5)?cal.clientHeight:(w3c)?cal.offsetHeight:200)+'px';
calS.style.width=((ie4||ie5)?cal.clientWidth:(w3c)?cal.offsetWidth:300)+'px';
cal.parentNode.style.width=parseInt(calS.style.width)+10+'px';
cal.parentNode.style.height=parseInt(calS.style.height)+10+'px';
now=new Date(); now.ref=new Date();
mi=now.getMonth(); yi=now.getFullYear()-1970;
updateCalender();
}
// ADD OTHER WINDOW ONLOAD EVENTS HERE...

</script>

3: Copy and paste the following HTML in the BODY section of your page wherever you want the calender to appear:
Select all...

<layer visibility="hide"><div style="position:relative; width:200px">
<div id="calenderS" class="calShadow"></div>
<div id="calender" class="calMain"><center>
<table cellpadding=0 border=0 cellspacing=0 width="100%" class="spanText"><tr align="center" valign="bottom">
<td class="calMonthYear"><img src="back.jpg" border="none" width=13 height=13 onmousedown="setMonth(false)"></td>
<td class="calMonthYear" width="75"><span id="calender_m" class="calMonthYear"> </span></td>
<td class="calMonthYear"><img src="next.jpg" border="none" width=13 height=13 onmousedown="setMonth(true)"></td>
<td class="calMonthYear">    </td>
<td class="calMonthYear"><img src="back.jpg" border="none" width=13 height=13 onmousedown="setYear(false)"></td>
<td class="calMonthYear" width="75"><span id="calender_y" class="calMonthYear"> </span></td>
<td class="calMonthYear"><img src="next.jpg" border="none" width=13 height=13 onmousedown="setYear(true)"></td>
</tr></table><hr>
<table cellpadding=0 border=0 cellspacing=0>
<tr align="center">
<td><div class="calHdr">S</div></td>
<td><div class="calHdr">M</div></td>
<td><div class="calHdr">T</div></td>
<td><div class="calHdr">W</div></td>
<td><div class="calHdr">T</div></td>
<td><div class="calHdr">F</div></td>
<td><div class="calHdr">S</div></td>
</tr><tr align="center">
<td><div id="cal1" class="calText"> </div></td>
<td><div id="cal2" class="calText"> </div></td>
<td><div id="cal3" class="calText"> </div></td>
<td><div id="cal4" class="calText"> </div></td>
<td><div id="cal5" class="calText"> </div></td>
<td><div id="cal6" class="calText"> </div></td>
<td><div id="cal7" class="calText"> </div></td>
</tr><tr align="center">
<td><div id="cal8" class="calText"> </div></td>
<td><div id="cal9" class="calText"> </div></td>
<td><div id="cal10" class="calText"> </div></td>
<td><div id="cal11" class="calText"> </div></td>
<td><div id="cal12" class="calText"> </div></td>
<td><div id="cal13" class="calText"> </div></td>
<td><div id="cal14" class="calText"> </div></td>
</tr><tr align="center">
<td><div id="cal15" class="calText"> </div></td>
<td><div id="cal16" class="calText"> </div></td>
<td><div id="cal17" class="calText"> </div></td>
<td><div id="cal18" class="calText"> </div></td>
<td><div id="cal19" class="calText"> </div></td>
<td><div id="cal20" class="calText"> </div></td>
<td><div id="cal21" class="calText"> </div></td>
</tr><tr align="center">
<td><div id="cal22" class="calText"> </div></td>
<td><div id="cal23" class="calText"> </div></td>
<td><div id="cal24" class="calText"> </div></td>
<td><div id="cal25" class="calText"> </div></td>
<td><div id="cal26" class="calText"> </div></td>
<td><div id="cal27" class="calText"> </div></td>
<td><div id="cal28" class="calText"> </div></td>
</tr><tr align="center">
<td><div id="cal29" class="calText"> </div></td>
<td><div id="cal30" class="calText"> </div></td>
<td><div id="cal31" class="calText"> </div></td>
<td><div id="cal32" class="calText"> </div></td>
<td><div id="cal33" class="calText"> </div></td>
<td><div id="cal34" class="calText"> </div></td>
<td><div id="cal35" class="calText"> </div></td>
</tr><tr align="center">
<td><div id="cal36" class="calText"> </div></td>
<td><div id="cal37" class="calText"> </div></td>
<td><div id="cal38" class="calText"> </div></td>
<td><div id="cal39" class="calText"> </div></td>
<td><div id="cal40" class="calText"> </div></td>
<td><div id="cal41" class="calText"> </div></td>
<td><div id="cal42" class="calText"> </div></td>
</table></center>
</div></div></layer>