One Hat Cyber Team

Edit File: index.html

<html>
<head>
<script Language="JavaScript">
// Class Calendar
// Description: Generates a dynamic calendar given a month and year.
// Usage:
//   To setup you need to define three stylesheet elements: .caldefault, .calday, .caltoday
//   Then create a Calendar object, e.g.,
//     var cal = new Calendar(date, month, year, action);
//   Where:
//     date - day of the month, e.g., 31 for March 31
//     month - number representing the month, e.g., 3 for March
//     year - e.g., 2001
//     action - the name of the function you want called if the user clicks on a day
//				This function will be passed with the arguments date, month, year
//	 When you want to display the calendary, simply call the Show method, e.g.,
//	   cal.Show();

// Class Methods
				
function Calendar_GetString()
{
	var firstDate = new Date(this.year,this.month,1);
	var firstDay = firstDate.getDay();
	
	var calStr = "<TABLE BORDER=1 COLS=7>";
	calStr += "<TR>";
	calStr += "<TD COLSPAN=7 ALIGN=center><SPAN class=caldefault>"+Calendar.monthName[this.month].toUpperCase()+" "+this.year+"</span></td>";
	calStr += "</tr>";
	calStr += "<TR>";

for (var i=0;i<Calendar.dayName.length;i++) 
		calStr += "<TD ALIGN=center><SPAN class=caldefault>"+Calendar.dayName[i]+"</span></td>";
	calStr += "</tr>";

var dayCount = 1;
	calStr += "<TR>";
	for (var i=0;i<firstDay;i++) 
		calStr += "<TD>&nbsp;</TD>";

var monthArg = this.month + 1;
	for (var i=0;i<this.monthDays[this.month];i++)
	{
		var styleStr = "calday";
		if (dayCount==this.date)
			styleStr = "caltoday";
			
		calStr += '<TD ALIGN="center"><A class="'+styleStr+'" HREF="javascript:void('+this.action+
					'('+dayCount+','+monthArg+','+this.year+'))">'+
					'<SPAN class="'+styleStr+'">'+
					dayCount+'</span></a></font></td>';
		dayCount++;
		if ((i+firstDay+1)%7==0&&(dayCount<this.monthDays[this.month]+1)) 
			calStr += "</TR><TR>";
	}

var totCells = firstDay+this.monthDays[this.month];
	for (var i=0;i<(totCells>28?(totCells>35?42:35):28)-totCells;i++) 
		calStr += "<TD> </td>"
	calStr += "</tr>";
	calStr += "</table>";
	return calStr;
}

function Calendar_Show()
{
	var calStr = this.GetString();
	document.write(calStr);
}

function Calendar(date,month,year,action)
{
	// Properties
	this.date = date;
	this.month = month;
	this.year = year;
	this.action = action;
	this.monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);

// Leap year test
	if ((this.year%4==0||this.year%100==0)&&(this.year%400==0)) 
		this.monthDays[1] = 29; 
	else 
		this.monthDays[1] = 28;
		
	// Methods
	this.Show = Calendar_Show;
	this.GetString = Calendar_GetString;
}
// Static Class Properties
Calendar.dayName = new Array("S","M","Tu","W","Th","F","S");
Calendar.monthName = new Array("January","February","March","April","May","June","July","August","September","October","November","December");

// Class CalendarSet
// Description: Keeps track of multiple calendars and has methods for populating popup fields.

function CalendarSet_Show()
{	
	var border = '<td bgcolor="' + this.borderColor +'"><img border="0" src="' + gImageDir + 'spacer.gif" width="2" height="2"></td>';
	document.write('<table border="0" cellpadding="2" cellspacing="0"><tr>');

// Show the top border
	for (var i=0;i<this.calendars.length+2;i++)
	{
		document.write(border);
	}
	document.write('</tr><tr>');

document.write(border);
	for (var i=0;i<this.calendars.length;i++)
	{
		document.write('<td>');
		this.calendars[i].Show();
		document.write('</td>');
	}
	document.write(border);
	document.write('</tr><tr>');
	
	// Show the bottom border
	for (var i=0;i<this.calendars.length+2;i++)
	{
		document.write(border);
	}
	document.write('</tr></table>');
}

function CalendarSet_SetMonthOptions(selectField)
{
	var selected = true;
	selectField.options.length = 0; // Clear the popup
	
	for (var i=0;i<this.calendars.length;i++)
	{
		var anOption = new Option(Calendar.monthName[this.calendars[i].month]+" "+this.calendars[i].year,(this.calendars[i].month+1)+","+this.calendars[i].year,selected,selected);
		selectField.options[i] = anOption;
	
		selected = false;
	}
	selectField.options[0].selected = true;
}

function CalendarSet(startDate,months,action)
{
	// Properties
	this.borderColor = "#42316B";
	this.calendars = new Array();

var now = new Date();
	var month=startDate.getMonth();
	var year = startDate.getFullYear();
	
	for (var i=0;i<months;i++)
	{
		var dayToHilite = 0;
		if ((now.getFullYear()==year)&&(now.getMonth()==month))
			dayToHilite = now.getDate();
		this.calendars[i] = new Calendar(dayToHilite,month,year,action);
		month++;
		if (month>=12)
		{
			month = 0;
			year++;
		}
	}

// Methods
	this.Show = CalendarSet_Show;
	this.SetMonthOptions = CalendarSet_SetMonthOptions;
	this.SetDateOptions = CalendarSet_SetDateOptions;
}

</script>
</head>

<body>
<script Language="JavaScript">
// Example Calendar Click Handler
function HandleCalClick(day,mon,year)
{
	alert("Got a click on " + mon + "/" + day + "/" + year);
}

// Setup
var gImageDir = "images/"

// Create calendar objects
var now=new Date();
var gCalendarSet = new CalendarSet(now,1,"HandleCalClick");

gCalendarSet.Show();

</script>
 </body> 
 </html>