 
<!-- ***************************** -->
<!-- Project: WEB-CALENDAR -->
<!-- Course: CSC309H1S -->
<!-- Developed By: Momchil Nikolov -->
<!-- ***************************** -->



<!-- arrays to store data about the calendar -->
var days        =   new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
var months      =   new Array('January','February','March','April','May','June','July','August','September','October','November','December');
var appTimes    =   new Array('9:00', '9:30', '10:00', '10:30','11:00','11:30','12:00','12:30','13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00');
var dayAbbr     =   new Array('st', 'nd', 'rd', 'th');
var eventList   =   [];
var movingApp   =   []; // buffer array to temporarily store the appointment that is being moved.

<!-- keep track of whether an event is being moved -->
var mov;

<!-- xml object and listener -->
var xmlDoc = document.implementation.createDocument("","albumindex",null);
xmlDoc.addEventListener("load", addXMLApps, false);

<!-- Date object corresponding to the current date -->
var myDateObj      =   new Date();
var myYear         =   myDateObj.getFullYear();
var myMonth        =   myDateObj.getMonth();
var myDate         =   myDateObj.getDate();
var myDay          =   myDateObj.getDay();
var firstDayDate   =   myDate-myDay;
var lastDayDate    =   firstDayDate + 6;



<!-- calendar constructor -->
function calendar(id,d) {

	this.id            =   id;
	this.dateObject    =   d; // to be used for setting the proper date.
	this.monthLength   =   getLength;
	this.write         =   writeCalendar;

	this.year    =   d.getFullYear();
	this.month   =   d.getMonth();
	this.date    =   d.getDate();
	this.day     =   d.getDay();	

	d.setDate(1); // get the first day of the month.
	
	d.setDate(this.date); // reset the date object to the correct date.
	
	addXMLApps();
	loadApp(); // load the appointments stored in the array after changing the week.	
} // end of calendar constructor.

<!-- XML file parser -->
function addXMLApps() {

	<!-- keep track of the current year, month and date as the algorithm moves through the loops -->
	var current_year;
	var current_month;
	var current_date;

	<!-- get the root of the xml document and start parsing down the tree -->
	var doc = xmlDoc.documentElement;

	<!-- go through all the years in the XML file -->
	var year = doc.getElementsByTagName("year");
	for (var i=0; i<year.length; i++) {

		current_year = parseInt(year[i].attributes["id"].value);
		if ( (current_year==myYear) ) {

		<!-- go through all the months in the XML file -->
		var month = year[i].getElementsByTagName("month");
		for (var j=0; j<month.length; j++) {

			current_month = parseInt(month[j].attributes["id"].value);
			if ( (current_month==myMonth) ) { 

			<!-- go through all the dates in the XML file -->
			var date = month[j].getElementsByTagName("date");
			for (var k=0; k<date.length; k++) {

				<!-- store the current date from the XML file -->
				current_date = parseInt(date[k].attributes["id"].value);
				
				<!-- parse the current appointment and display it on the calendar -->
				var appointment = date[k].getElementsByTagName("appointment");
				for (var l=0; l<appointment.length; l++) {

					<!-- determine the starting position of the appointment -->
					var appDate = new Date(current_year, current_month, current_date, 00, 00, 00);
					var appTime = appDate.getTime();

					<!-- determine the starting and ending times of the current week -->
					var weekDate      = new Date(myYear, myMonth, firstDayDate, 00, 00, 00);
					var weekStartTime = weekDate.getTime();
					var weekEndTime   = weekStartTime + 1000*60*60*24*7;

					<!-- determine whether the starting time of the appointment falls between the starting and ending times of the current week -->
					if ( appTime>=weekStartTime && appTime<=weekEndTime ) {

						<!-- obtain the appointment information from the XML file -->
						var aStart   = parseInt(appointment[l].getElementsByTagName("start")[0].firstChild.nodeValue);
						var aEnd     = parseInt(appointment[l].getElementsByTagName("end")[0].firstChild.nodeValue);
						var aSubject = appointment[l].getElementsByTagName("subject")[0].firstChild.nodeValue;
						var aPlace   = appointment[l].getElementsByTagName("place")[0].firstChild.nodeValue;
						var aText    = appointment[l].getElementsByTagName("detail")[0].firstChild.nodeValue;
	
						<!-- store the appointment information in an object -->
						var event     = new Object();
						event.sTime   = aStart;
						event.eTime   = aEnd;
						event.subject = aSubject;
						event.place   = aPlace;
						event.text    = aText;
						event.eIdent  = 0; // indicate that this is an appointment.

						<!-- store the appointment object in the array -->
						eventList[aStart] = event;

						<!-- displat the appointment on the calendar -->
						positionEvent(aStart);
					
					}
				}

				<!-- parse the current holiday and display it on the calendar -->
				var holiday = date[k].getElementsByTagName("holiday");
				for (var l=0; l<holiday.length; l++) {

					<!-- determine the starting time of the holiday -->
					var holDate = new Date(current_year, current_month, current_date, 00, 00, 00);
					var holTime = holDate.getTime();

					<!-- determine the starting and ending times of the current week -->
					var weekDate      = new Date(myYear, myMonth, firstDayDate, 00, 00, 00);
					var weekStartTime = weekDate.getTime();
					var weekEndTime   = weekStartTime + 1000*60*60*24*7;

					<!-- determine whether the starting time of the holiday falls between the starting and ending times of the current week -->
					if ( holTime>=weekStartTime && holTime<=weekEndTime ) { 
					
						<!-- determine the starting and ending position of the holiday -->
						var hStart = (holDate.getDay()*appTimes.length) + 1;
						var hEnd   = hStart+(appTimes.length) - 1;

						<!-- obtain the rest of the holiday information from the XML file -->
						var hSubject = holiday[l].getElementsByTagName("subject")[0].firstChild.nodeValue;
						var hPlace   = holiday[l].getElementsByTagName("place")[0].firstChild.nodeValue;
						var hText    = holiday[l].getElementsByTagName("detail")[0].firstChild.nodeValue;

						<!-- store the holiday information in an object -->
						var event     = new Object();
						event.sTime   = hStart;
						event.eTime   = hEnd;
						event.subject = hSubject;
						event.place   = hPlace;
						event.text    = hText;
						event.eIdent  = 1; // indicate that this is a holiday.

						<!-- store the holiday object in the array -->
						eventList[hStart] = event;

						<!-- display the holiday on the calendar -->
						positionEvent(hStart);

					}
				}
			}
			} // end of "if ( (current_month==myMonth) )".
		}
		} // end of "if ( (current_year==myYear) )".
	}
} // end of addXMLApps().



<!-- loads the appointments and holidays for a given week after the week has been changed -->
function loadApp() {

	<!-- go through the appointments array and load all the appointments -->
	for (var i=0; i<days.length*appTimes.length; i++) {

		if (eventList[i]) {

			positionEvent(i);
		}
	}	
} // end of loadApp().



<!-- builds the body of the actual calendar -->
function writeCalendar() {

	<!-- store the markup text for the calendar -->
	var calString = '<div id="calContainer">';

	<!-- create a table containing the whole calendar -->
	calString += '<table cellspacing="0" cellpadding="0" width="100%" height="100%" style="border:3px black solid;">';

	<!-- buffer -->
	calString += '<tr> <td class="appHeader" colspan="3" height="5px" /> </tr>';

	<!-- write the current date at the top of the calendar -->
	calString += '<tr>';
		calString += '<td class="appHeader" width="15%" />';
		calString += '<th class="welcome" height="30px">' + 'Today is ' + days[this.day] + ', ' + months[this.month] + ' ' + this.date + ', ' + this.year + '</th>';
		calString += '<td class="appHeader" width="15%" />';
	calString += '</tr>';

	<!-- navigation for moving to previous or next week -->
	calString += '<tr>';
		calString += '<td class="navigation" style="text-align:left" onClick="changeWeek(-7,\'' + this.id + '\')"><a> &nbsp; &lt;&lt;&lt; Week &nbsp; &nbsp; </a></td>';
		// calString += '<td class="navigation" style="text-align:left"> <input type="button" value="Prev WEEK" onclick="changeWeek(-7,\'' + this.id + '\')> </input> </td>';
		calString += '<td class="appHeader" />';
		calString += '<td class="navigation" style="text-align:right" onClick="changeWeek(7,\'' + this.id + '\')"><a> &nbsp; &nbsp; Week &gt;&gt;&gt; &nbsp; </a></td>';
	calString += '</tr>';

	<!-- buffer between week navigation and calendar table -->
	calString += '<tr>';
		calString += '<td class="appHeader" colspan="3" height="5px" />';
	calString += '</tr>';

	<!-- This TR will contain two cells, each of which will have a table inside. The first cell will store the days of the week, the second cell will store all the appointment times. -->
	calString += '<tr>';
	
		<!-- store the days of the week -->
		calString += '<td>';
		calString += '<table cellspacing="0" cellpadding="0" width="100%" height="100%">';
			
		var newMonthDate=1;
		for (var i=0; i<(days.length+1); i++) {

			var weekDate=(this.date+i - (this.day + 1));

			<!-- enter a heading above the week days -->
			if (i==0) {
				calString += '<tr> <th class="dayHeader" height="25px" colspan="2"> DAY </th> </tr>';
			}
			<!-- enter the week days with the corresponding dates and date abbreviations -->
			else {
				if(i==(this.day+1)){
					<!-- style today's date appropriately -->
					calString += '<tr>';
					calString += '<td class="dateToday" style="text-align:center" height="80px"> &nbsp ' + days[i-1] + ' &nbsp </td>';
				}
				else{
					<!-- enter the rest of the week days -->
					calString += '<tr>';
					calString += '<td class="dayHeader" style="text-align:center" height="80px"> &nbsp ' + days[i-1] + ' &nbsp </td>';
				}
				<!-- enter the date corresponding to the day of the week -->
				if ( weekDate<=this.monthLength() ) {

					if (weekDate<=0) {

						calString += '<td class="dayHeader" style="text-align:left" height="80px" width="45px"> &nbsp </td>';
					}
					if (weekDate==1 || weekDate==21 || weekDate==31) {
						if (weekDate==(this.date)) {
							calString += '<td class="dateToday" style="text-align:left" height="80px" width="45px">' + weekDate + '<sup>' + dayAbbr[0] + '</sup></td>';
						}
						else{
							calString += '<td class="dayHeader" style="text-align:left" height="80px" width="45px">' + weekDate + '<sup>' + dayAbbr[0] + '</sup></td>';
						}
					}
					if (weekDate==2 || weekDate==22) {
						if (weekDate==(this.date)) {
							calString += '<td class="dateToday" style="text-align:left" height="80px" width="45px">' + weekDate + '<sup>' + dayAbbr[1] + '</sup></td>';
						}
						else{
							calString += '<td class="dayHeader" style="text-align:left" height="80px" width="45px">' + weekDate + '<sup>' + dayAbbr[1] + '</sup></td>';
						}
					}
					if (weekDate==3 || weekDate==23) {
						if (weekDate==(this.date)) {
							calString += '<td class="dateToday" style="text-align:left" height="80px" width="45px">' + weekDate + '<sup>' + dayAbbr[2] + '</sup></td>';
						}
						else{
							calString += '<td class="dayHeader" style="text-align:left" height="80px" width="45px">' + weekDate + '<sup>' + dayAbbr[2] + '</sup></td>';
						}
					}
					if (weekDate>3 && weekDate!=31 && weekDate!=21 && weekDate!=22 && weekDate!=23) {
						if (weekDate==(this.date)) {
							calString += '<td class="dateToday" style="text-align:left" height="80px" width="45px">' + weekDate + '<sup>' + dayAbbr[3] + '</sup></td>';
						}
						else{
							calString += '<td class="dayHeader" style="text-align:left" height="80px" width="45px">' + weekDate + '<sup>' + dayAbbr[3] + '</sup></td>';
						}
					}
				}
				else{
					if (newMonthDate==1) {
						if (weekDate==(this.date)) {
							calString += '<td class="dateToday" style="text-align:left" height="80px" width="45px">' + newMonthDate + '<sup>' + dayAbbr[0] + '</sup></td>';
						}
						else{
							calString += '<td class="dayHeader" style="text-align:left" height="80px" width="45px">' + newMonthDate + '<sup>' + dayAbbr[0] + '</sup></td>';
						}
					}
					if (newMonthDate==2) {
						if (weekDate==(this.date)) {
							calString += '<td class="dateToday" style="text-align:left" height="80px" width="45px">' + newMonthDate + '<sup>' + dayAbbr[1] + '</sup></td>';
						}
						else{
							calString += '<td class="dayHeader" style="text-align:left" height="80px" width="45px">' + newMonthDate + '<sup>' + dayAbbr[1] + '</sup></td>';
						}
					}
					if (newMonthDate==3) {
						if (weekDate==(this.date)) {
							calString += '<td class="dateToday" style="text-align:left" height="80px" width="45px">' + newMonthDate + '<sup>' + dayAbbr[2] + '</sup></td>';
						}
						else{
							calString += '<td class="dayHeader" style="text-align:left" height="80px" width="45px">' + newMonthDate + '<sup>' + dayAbbr[2] + '</sup></td>';
						}
					}
					if (newMonthDate>3) {
						if (weekDate==(this.date)) {
							calString += '<td class="dateToday" style="text-align:left" height="80px" width="45px">' + newMonthDate + '<sup>' + dayAbbr[3] + '</sup></td>';
						}
						else{
							calString += '<td class="dayHeader" style="text-align:left" height="80px" width="45px">' + newMonthDate + '<sup>' + dayAbbr[3] + '</sup></td>';
						}
					}
					newMonthDate++;
				}
				calString += '</tr>';
			}
		}

		<!-- end of storing the days of the week -->
		calString += '</table>';
		calString += '</td>';

		<!-- store the appointment-time field -->
		calString += '<td colspan="2">';
		calString += '<table cellpadding="0" cellspacing="0" width="100%" height="100%" border="1">';

		<!-- store the appointment times horizontally at the top of the table -->
		calString += '<tr>';
		for (var i=0; i<appTimes.length; i++) {
			calString += '<th class="timeHeader" width="6%" style="text-align:center">' + appTimes[i] + '</th>';
		}
		calString += '</tr>';

		<!-- store the appointment slots -->
		calString += '<tr>';
		
		<!-- display the cells that will contain the appointments -->
		for (var j=0; j<((days.length*appTimes.length)+1); j++) {

			if (j<appTimes.length) {

				<!-- write the first row of appointments -->
				calString += '<td class="emptySlot" height="80px" id="c' + (j+1) + '" onmousedown="mouseDown(event);" onmouseup="mouseUp(event);" onmouseover="mouseOver(event);" > &nbsp </td>';
				if (j==(appTimes.length-1)) {
					calString += '</tr>';
				}
			}
			else {
			<!-- write the rest of the appointments -->
				if (j==appTimes.length) {
					calString += '<tr id="day2">';
				}
				else {
					if (j%appTimes.length==1 && j>(appTimes.length+1)) {
						calString += '<tr id="day' + (j-2-appTimes.length) + '">';
					}
					calString += '<td class="emptySlot" height="80px" id="c' + j + '" onmousedown="mouseDown(event);" onmouseup="mouseUp(event);" onmouseover="mouseOver(event);" > &nbsp </td>';
					if (j%appTimes.length==0) {
						calString += '</tr>';
					}
				}
			}
		}
		<!-- end of appointment slots -->
		calString += '</tr>';

		<!-- end the appointment field -->
		calString += '</table>';
		calString += '</td>';

	<!-- end the TR storing the cells with weekdays and appointments -->
	calString += '</tr>';	

	<!-- input the fields for adding appointments -->
        calString += '<tr>';
	calString += '<td colspan="3">';

		<!-- table containing the form for adding new events -->	
		calString += '<form>';
		calString += '<table cellpadding="0" cellspacing="0" width="100%" height="100%" border="0">';

		<!-- buffer before the heading -->
		calString += '<tr> <td class="appHeader" colspan="8" height="5px" /> </tr>';

		<!-- display the headings at the beginning of the form -->
		calString += '<tr>';
			calString += '<th class="appHeader" colspan="2" style="text-align:center" width="40%"> Appointment or Holiday Detail : </th>';
			calString += '<th class="appHeader" colspan="2" style="text-align:center" width="20%"> Add an Appointment : </th>';
			calString += '<th class="appHeader" colspan="2" style="text-align:center" width="20%"> Add a Holiday : </th>';
			calString += '<th class="appHeader" colspan="2" style="text-align:center" width="20%"> Delete Event : </th>';
		calString += '</tr>';

		<!-- buffer -->
		calString += '<tr> <td class="appHeader" colspan="8" height="5px" /> </tr>';
			
		calString += '<tr>';
			<!-- subject of an event -->
			calString += '<td class="appHeader" style="text-align:right"> Subject : &nbsp; </td>';
			calString += '<td class="appHeader" style="text-align:left"> <input type="text" id="appSubject" size="70" style="font: 10pt Verdana" /> </td>';

			<!-- selection for starting day of an appointment -->
			calString += '<td class="appHeader" style="text-align:right"> Day: &nbsp; </td>';
			calString += '<td class="appHeader" style="text-align:left">';
				calString += '<select id="appointmentDayAdd">';	
					for (var i=0; i<(days.length); i++) {
						calString += '<option>' + days[i] + '</option>';
					}		
				calString += '</select>';
			calString += '</td>';
			
			<!-- buffer -->
			calString += '<td class="appHeader" colspan="4" height="5px" />';
		calString += '</tr>';

		<!-- buffer -->
		calString += '<tr> <td class="appHeader" colspan="8" height="5px" /> </tr>';

		calString += '<tr>';
			
			<!-- place of an event -->
			calString += '<td class="appHeader" style="text-align:right"> Place : &nbsp; </td>';
			calString += '<td class="appHeader" style="text-align:left"> <input type="text" id="appPlace" size="70" style="font: 10pt Verdana" /> </td>';

			<!-- selection for starting time of an appointment -->
			calString += '<td class="appHeader" style="text-align:right"> Start Time: &nbsp; </td>';
			calString += '<td class="appHeader" style="text-align:left">';
				calString += '<select id="startTimeAdd">';
					for (var i=0; i<(appTimes.length)-1; i++) {
						calString += '<option>' + appTimes[i] + '</option>';
					}	
				calString += '</select>';
			calString += '</td>';

			<!-- buffer -->
			calString += '<td class="appHeader" colspan="2" height="5px" />';
			
			calString += '<td class="appHeader" style="text-align:right"> Day: &nbsp; </td>';
			calString += '<td class="appHeader" style="text-align:left">';
				calString += '<select id="dayDel">';
					for (var i=0; i<(days.length); i++) {
						calString += '<option>' + days[i] + '</option>';
					}		
				calString += '</select>';
			calString += '</td>';

		calString += '</tr>';

		<!-- buffer -->
		calString += '<tr> <td class="appHeader" colspan="8" height="5px" /> </tr>';
		
		calString += '<tr>';

			<!-- detail about an event -->
			calString += '<td class="appHeader" style="text-align:right" > Detail: &nbsp; </td>';
			calString += '<td class="appHeader" style="text-align:left"> <input type="text" id="appText" size="70" style="font: 10pt Verdana" /> </td>';

			<!-- selection for ending time of an appointment -->
			calString += '<td class="appHeader" style="text-align:right"> End Time: &nbsp; </td>';
			calString += '<td class="appHeader" style="text-align:left">';
				calString += '<select id="endTimeAdd">';
					for (var i=1; i<(appTimes.length); i++) {
						calString += '<option>' + appTimes[i] + '</option>';
					}	
				calString += '</select>';
			calString += '</td>';

			<!-- selection for adding a holiday -->
			calString += '<td class="appHeader" style="text-align:right"> Day: &nbsp; </td>';
			calString += '<td class="appHeader" style="text-align:left">';
				calString += '<select id="holidayDay">';
					for (var i=0; i<(days.length); i++) {
						calString += '<option>' + days[i] + '</option>';
					}	
				calString += '</select>';
			calString += '</td>';

			<!-- selection for erasing events -->
			calString += '<td class="appHeader" style="text-align:right"> Start Time: &nbsp; </td>';
			calString += '<td class="appHeader" style="text-align:left">';
				calString += '<select id="startTimeDel">';
					for (var i=0; i<(appTimes.length)-1; i++) {
						calString += '<option>' + appTimes[i] + '</option>';
					}	
				calString += '</select>';
			calString += '</td>';

		calString += '</tr>';

		<!-- buffer before the form buttons -->
		calString += '<tr> <td class="appHeader" colspan="8" height="5px" /> </tr>';

		<!-- display the buttons used for scheduling -->
		calString += '<tr>';
			calString += '<td class="appHeader" style="text-align:center" colspan="2"> &nbsp; <input type = "reset" value = "   Reset Scheduling   " style="font: 13pt Verdana" /> &nbsp; </td>';
			calString += '<td class="appHeader" style="text-align:center" colspan="2"> &nbsp; <input type="button" onclick="addNewAppointment();" value="   Add Appointment   " style="font: 13pt Verdana" /> &nbsp; </td>';
			calString += '<td class="appHeader" style="text-align:center" colspan="2"> &nbsp; <input type="button" onclick="addNewHoliday();" value="   Add Holiday   " style="font: 13pt Verdana" /> &nbsp; </td>';
			calString += '<td class="appHeader" style="text-align:center" colspan="2"> &nbsp; <input type="button" onclick="deleteEvent();" value="   Delete Event   " style="font: 13pt Verdana" /> &nbsp; </td>';
		calString += '</tr>';

		<!-- buffer after the form buttons -->
		calString += '<tr> <td class="appHeader" colspan="8" height="5px" /> </tr>';
			
		<!-- end of the table containing the forms for adding new events -->
		calString += '</table>';

	<!-- end of the fields for adding events -->
	calString += '</td>';
	calString += '</tr>';
   
	<!-- end of the table containing the whole calendar -->
	calString += '</table>';
	calString += '</form>';

	calString += '</div>';
	return calString;
} // end of writeCalendar().



<!-- ************************************************************************** -->
<!-- functions needed for adding, deleting and moving appointments and holidays -->
<!-- ************************************************************************** -->



function mouseDown(mEvent) {

	<!-- obtain the id of the appointment slot -->
	var tmp = mEvent.target.id;
	var id  = parseInt(tmp.substring(1,tmp.length));

	if (eventList[id]) {

		<!-- determine the length of the event that is to be moved -->
		var movingAppLength = eventList[id].eTime - eventList[id].sTime;

		<!-- obtain the information for the appointment that is to be moved -->
		movingAppStart   = eventList[id].sTime;
		movingAppEnd     = eventList[id].eTime;
		movingAppSubject = eventList[id].subject;
		movingAppPlace   = eventList[id].place;
		movingAppText    = eventList[id].text;

		<!-- store the information for the appointment in an object -->
		var event     = new Object();
		event.sTime   = movingAppStart;
		event.eTime   = movingAppEnd;
		event.subject = movingAppSubject;	
		event.place   = movingAppPlace;
		event.text    = movingAppText;
		event.eIdent  = eventList[id].eIdent;
	
		movingApp[1] = event;
		
		<!-- remove the event object from the array -->	
		eventList[movingAppStart] = eventList[-1];
		mov = true; // indicate that an appointment move has begun.
	}
	else {
		movingApp[1] = movingApp[-1]; // clear the buffer array.
	}
}



function mouseUp(mEvent) {

	<!-- obtain the id of the appointment slot -->
	var tmp          = mEvent.target.id;
	var id           = parseInt(tmp.substring(1,tmp.length));
	var movingAppEnd = id + movingApp[1].eTime - movingApp[1].sTime;

	<!-- store the event being moved in its new place in the appointments array -->
	var event     = new Object();
	event.sTime   = id;
	event.eTime   = movingAppEnd;
	event.subject = movingApp[1].subject;	
	event.place   = movingApp[1].place;
	event.text    = movingApp[1].text;
	event.eIdent  = movingApp[1].eIdent;

	var toBePlaced        = id;
	eventList[toBePlaced] = event;

	positionEvent(id);

	mov = false; // indicate that an appointment move has finished.
}



function mouseOver (mEvent) {

	moveAppointment(mEvent);
}



<!-- repositions an event to a new slot in the table -->
function moveAppointment(mEvent) {

	if (mov) {

		<!-- obtain the id of the new appointment slot -->
		var tmp = mEvent.target.id;
		var id  = parseInt(tmp.substring(1,tmp.length));

		<!-- determine the length of the event that is to be moved -->
		var movingAppLength = movingApp[1].eTime - movingApp[1].sTime;
		var movingAppEnd    = id + movingAppLength;

		<!-- remove the appointment from its slot -->
		for (var i=movingApp[1].sTime; i<=movingApp[1].eTime; i++) {

			var toBeRemoved                  = document.getElementById("c"+i);
			toBeRemoved.setAttribute("class", "emptySlot");
			toBeRemoved.firstChild.nodeValue = "";
		}
		movingApp[1].sTime = id;
		movingApp[1].eTime = movingAppEnd;
		
		<!-- position the appointment in its new slots -->
		if ( movingApp[1].eIdent==0 ) { // moving appointment.
			<!-- position the appointment in its new slot -->
			for (var i=id; i<=movingAppEnd; i++) {

				var toBeRemoved                  = document.getElementById("c"+i);
				toBeRemoved.setAttribute("class", "appointmentSlot");
			}
		}
		<!-- position the holiday in its new slots -->
		if ( movingApp[1].eIdent==1 ) { // moving holiday.
			<!-- position the holiday in its new slot -->
			for (var i=id; i<=movingAppEnd; i++) {

				var toBeRemoved                  = document.getElementById("c"+i);
				toBeRemoved.setAttribute("class", "holidaySlot");
			}
		}		
	}
} // end of moveAppointment();



<!-- stores the information about the desired holiday and displays it in the calendar -->
function addNewHoliday() {

	<!-- obtain the values from the form for adding appointments -->
	var day      = document.getElementById("holidayDay").value;
	var aSubject = document.getElementById("appSubject").value;
	var aPlace   = document.getElementById("appPlace").value;
	var aText    = document.getElementById("appText").value;

	<!-- determine the starting position of the holiday in the table -->
	var hRow;

	for (var i=0; i<(days.length); i++) {
		if (day==days[i]) {

			hRow = i;
		}
	}
	var hStart = hRow*(appTimes.length)+1;
	var hEnd   = hStart+(appTimes.length)-1;

	<!-- store the holiday information in an object -->
	var event     = new Object();
	event.sTime   = hStart;
	event.eTime   = hEnd;
	event.subject = aSubject;
	event.place   = aPlace;
	event.text    = aText;
	event.eIdent  = 1; // indicate that this is a holiday.

	<!-- store the holiday object in the array -->
	eventList[hStart] = event;

	positionEvent(hStart);
} // end of addNewHoliday().



<!-- stores the information about the desired appointment and displays it in the calendar -->
function addNewAppointment() {			

	<!-- obtain the values from the form for adding appointments -->
	var sTime    = document.getElementById("startTimeAdd").value;
	var eTime    = document.getElementById("endTimeAdd").value;
	var aSubject = document.getElementById("appSubject").value;
	var aPlace   = document.getElementById("appPlace").value;
	var aText    = document.getElementById("appText").value;
	var day      = document.getElementById("appointmentDayAdd").value;

	<!-- determine the starting position of the holiday in the table -->
	// determine the row
	var hRow;
	for (var i=0; i<(days.length); i++) {
		if (day==days[i]) {

			hRow = i;
		}
	}
	
	// determine the starting column
	var vColStart;
	for (var i=0; i<(appTimes.length); i++) {
		if (sTime==appTimes[i]) {

			vColStart = i+1;
		}
	}
	
	// determine the ending column
	var vColEnd;
	for (var i=0; i<(appTimes.length); i++) {
		if (eTime==appTimes[i]) {

			vColEnd = i+1;
		}
	}
	
	// determine the cell number
	var startCell = hRow*appTimes.length + vColStart;
	var endCell = hRow*appTimes.length + vColEnd;
	
	<!-- store the appointment information in an object -->
	var event     = new Object();
	event.sTime   = startCell;
	event.eTime   = endCell;	
	event.subject = aSubject;
	event.place   = aPlace;
	event.text    = aText;
	event.eIdent  = 0; // indicate that this is an appointment.

	<!-- store the appointment object in the array -->
	eventList[startCell] = event;

	positionEvent(startCell);
} // end of addNewAppointment().



<!-- positions the event at sTime in the calendar based on the information stored in the array -->
function positionEvent (sTime) {

	<!-- obtain the starting and ending times of the event -->
	var aStart = eventList[sTime].sTime;
	var aEnd   = eventList[sTime].eTime;

	<!-- determine the length of the event -->
	var span = (aEnd-aStart);

	<!-- alert the user in case of inappropriate form entries -->
	if (span<0) {
		window.alert("Your Event's Start Time Must Precede Your Event's End Time. Please Reschedule.");
	}
	else {
		if (eventList[sTime].eIdent==1) { // the event is a holiday.
			<!-- display the selected holiday and format it appropriately -->
			for (var i=aStart; i<=aEnd; i++) {
				sN = document.getElementById("c"+i);
				sN.firstChild.nodeValue = "";
				sN.setAttribute("class", "holidaySlot");
			}
		}
		if (eventList[sTime].eIdent==0) { // the event is an appointment.
			<!-- display the selected appointment and format it appropriately -->
			for (var i=aStart; i<=aEnd; i++) {
				sN = document.getElementById("c"+i);
				sN.firstChild.nodeValue = "";
				sN.setAttribute("class", "appointmentSlot");
			}
		}	
	}
	var startNumber                  = document.getElementById("c"+aStart);
	startNumber.firstChild.nodeValue = eventList[sTime].subject;
} // end of positionEvent().



function deleteEvent() {

	<!-- store the starting time of the event that is to be deleted -->
	var deleteTime = document.getElementById("startTimeDel").value;
	var deleteDay = document.getElementById("dayDel").value;
	
	<!-- determine the starting position of the holiday in the table -->
	// determine the row
	var hRow;
	for (var i=0; i<(days.length); i++) {
		if (deleteDay==days[i]) {

			hRow = i;
		}
	}
	
	// determine the starting column
	var vColStart;
	for (var i=0; i<(appTimes.length); i++) {
		if (deleteTime==appTimes[i]) {

			vColStart = i+1;
		}
	}
	
	var deleteFromTime = hRow*appTimes.length + vColStart;

	<!-- ensure that there is an event positioned at the selected starting time slot for deletion -->
	if (!eventList[deleteFromTime]) {
		window.alert("There is no event beginning at the chosen slot. Please re-enter.");
		return;
	}
	
	<!-- remove the event -->
	for (var i=eventList[deleteFromTime].sTime; i<=eventList[deleteFromTime].eTime; i++) {
		var toBeRemoved = document.getElementById("c"+i);
		toBeRemoved.firstChild.nodeValue = "";
		toBeRemoved.setAttribute("class", "emptySlot");
	}
	<!-- remove the event object from the array -->	
	eventList[deleteFromTime] = eventList[-1];
} // end of deleteEvent().



<!-- ***************************************************** -->
<!-- functions needed for keeping track of the proper DATE -->
<!-- ***************************************************** -->



<!-- determines the length of the current month -->
function getLength(){

	switch(this.month)
	{
		case 1:
			if((this.dateObject.getFullYear()%4==0&&this.dateObject.getFullYear()%100!=0)||this.dateObject.getFullYear()%400==0) {
				return 29; // leap year
			}
			else {
				return 28;
			}
		case 3:
			return 30;
		case 5:
			return 30;
		case 8:
			return 30;
		case 10:
			return 30
		default:
			return 31;
	}
}



<!-- creates a calendar for the next or previous week -->
function changeWeek(week, cal) {

	cal = eval(cal);

	<!-- set-up the date object for the new calendar -->
	cal.dateObject.setDate(cal.dateObject.getDate() + week);

	<!-- build the calendar -->
	cal = new calendar(cal.id,cal.dateObject);
	document.getElementById('calContainer').innerHTML = cal.write();
}