Dates and Calendars - A Basic Calendar

for Win/IE5.5+, Netscape 6+, Mozilla 1.1+, Opera 7+, Safari

I'm not going to explain this, it's just here if you want it. The code can be copied from the textarea below.

That said, there are just a few things I want to point out -
1. Netscape 6 has a draw problem with the calendar navigation.
2. The calendar navigation is built using .innerHTML because it shortens the length of the code.
3. The script uses .getFullYear() rather than .getYear() - it returns 4 digit years for all the browsers mentioned above.
4. The leap year functions were lifted from somewhere else but I've seen them used in so many places that I'm not sure who to credit them to.
5. The entire code takes up only 112 lines!

Sun	Mon	Tue	Wed	Thu	Fri	Sat

<style>
#pyNav, #pmNav {border:1px #999 solid}
#myNav {}
#nmNav, #nyNav { border:1px #999 solid}
#calNav td, #calNav td a { text-align:center;font-family:arial;font-size:12px;font-weight:bold;background-color:#eaeaea;text-decoration:none }
#calNav {margin-bottom:5px}
#calNav tr td a {color:#00f}
#calTbl {}
#calTbl td {text-align:center;font-family:arial;font-size:11px;border:1px #ccc solid}
#calTbl thead td {font-weight:bold}
</style>

<div style="border:1px ridge;padding:2px;width:200px;background-color:#fff" id="calDiv">
<table width="100%" id="calNav">
<tr>
<td id="pyNav"></td><td id="pmNav"></td><td id="myNav" width="100"></td><td id="nmNav"></td><td id="nyNav"></td>
</tr>
</table>
<table  id="calTbl" width="100%" cellspacing="0">
<thead>
<tr style="background-color:#eaeaea">
	<td>Sun</td>
	<td>Mon</td>
	<td>Tue</td>
	<td>Wed</td>
	<td>Thu</td>
	<td>Fri</td>
	<td>Sat</td>
</tr>
</thead>
<tbody></tbody>
</table>
</div>

<script>
/* Today's date */
var date = new Date();
var curr_dy = date.getDate(); 
var curr_mn = date.getMonth();
var curr_yr = date.getFullYear();

var DOMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var lDOMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var moty = ["January","February","March","April","May","June","July","August","September","October","November","December"];

function Calendar_get_daysofmonth(monthNo, p_year) {
	if ((p_year % 4) == 0) {
		if ((p_year % 100) == 0 && (p_year % 400) != 0)
			return DOMonth[monthNo];
		return lDOMonth[monthNo];
	} else
		return DOMonth[monthNo];
}

function getNextMonth(m,y,incr){
	var ret_arr = new Array();
	ret_arr[0] = m + incr; ret_arr[1] = y;
	if (ret_arr[0] == 12){ ret_arr[0]=0; ret_arr[1]=ret_arr[1]+1; }
	if (ret_arr[0] == -1){ ret_arr[0]=11; ret_arr[1]=ret_arr[1]-1; }
	return ret_arr;
}
function figureDOTW(m,d,y){
	var tDate = new Date(); tDate.setDate(d); tDate.setMonth(m); tDate.setYear(y); return tDate.getDay();
}
function scramKids(n){ // this is a basic removeChild loop for removing all childNodes from node n
	var numKids = n.childNodes.length;
	for (i=0;i<numKids;i++) { n.removeChild(n.childNodes[0]); }
}		
function buildCalendar(m,y,ff){
	var dayNo = figureDOTW(m,1,y);
	var monthNo = Calendar_get_daysofmonth(m,y);

var dayCount = 1;
	var calTB = document.getElementById('calTbl').getElementsByTagName('tbody')[0];
	var calNav = document.getElementById('calNav');
	scramKids(calTB);
	for (i=0;i<6;i++){ // row loop
		var calTR = document.createElement('tr');
		var calTDtext;
		
		for (j=0; j < 7; j++){ // cells in row loop
			var calTD = document.createElement('td');
			if (j == 0 || j == 6 )
				calTD.style.backgroundColor = '#EDF0FF';
			if ((i==0 && j < dayNo) || dayCount > monthNo) // if this is the first row....
				calTDtext = document.createElement('br');
			else  {
				calTDtext = document.createTextNode(dayCount.toString());
				
				if (dayCount == curr_dy && m == curr_mn && y == curr_yr)
					calTD.style.color = '#f00';
				dayCount++;
			}
			calTD.appendChild(calTDtext);
			calTD.setAttribute('width','14%');
			calTR.appendChild(calTD);
		}
		calTB.appendChild(calTR);
	}
	
	var nMonth = getNextMonth(m,y,+1);
	var pMonth = getNextMonth(m,y,-1);
	
	document.getElementById('pyNav').innerHTML = '<a href="javascript:void(0)" title="Previous Year" onclick="buildCalendar('+m+','+(y-1)+',\''+ff+'\')"><<</a>';
	document.getElementById('pmNav').innerHTML = '<a href="javascript:void(0)" title="Previous Month" onclick="buildCalendar('+pMonth[0]+','+pMonth[1]+')"><</a>';
	document.getElementById('myNav').innerHTML = moty[m] +' '+y;
	document.getElementById('nyNav').innerHTML = '<a href="javascript:void(0)" title="Next Year" onclick="buildCalendar('+m+','+(y+1)+')">>></a>';
	document.getElementById('nmNav').innerHTML = '<a href="javascript:void(0)" title="Next Month" onclick="buildCalendar('+nMonth[0]+','+nMonth[1]+')">></a>';
}
buildCalendar(curr_mn,curr_yr);
</script>

PXL8 2004