Javascript calendar showing daily events

For the basic part of constructing and displaying a HTML calendar in javascript please refer to url:
http://jszen.blogspot.com/2007/03/how-to-build-simple-calendar-with.html

Making use of the above calendar , all that is needed inorder to show events on a day to day basis, is to get a list of events for a particular day. The structure for storing the events for each day can be an xml file or a json file or any other kind of data structure that is approrpiate.

what changes are needed to be made to the code at url: http://jszen.blogspot.com/2007/03/how-to-build-simple-calendar-with.html

1) in "Calendar.prototype.generateHTML" function add a function to return all the events for a particular day

html += getDayEvents(tempYear, tempMonth, day);

2) The xml file that is used in this example is shown below:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<year id="2008">
<month id="2">
<days id="1">
<events><a href="#" target="_blank"> some other event</a></events>
</days>
<days id="2">
</days>
</month>
<month id="3">
<days id="6">
<events><a href="#" target="_blank"> some other event</a></events>
</days>
<days id="2">
</days>
</month>
</year>

3) code the javascript function

function getDayEvents(year, month, day)
{
var dayevents = "&nbsp";
//months are being referred to as Jan=0. Feb=1, etc so add 1 to the month so that it matches the normal calendar months
var tempmonth = month + 1;

var rowcount=xmlDoc.getElementsByTagName('days');
var found = false;

for(ii=0; !found && ii<rowcount.length;ii++)
{
//check if we have got the correct day , month and year
if ( (rowcount[ii].getAttribute('id') == day) && (rowcount[ii].parentNode.getAttribute('id') == tempmonth)
&& (rowcount[ii].parentNode.parentNode.getAttribute('id') == year) )
{
//get a list of all events for that day
for(jj=0;jj<rowcount[ii].childNodes.length;jj++)
{
if (rowcount[ii].childNodes[jj].text != "undefined")
{
dayevents += rowcount[ii].childNodes[jj].text;
}
}
found = true;
}
}

return dayevents;
}

4) To show previous month and next month events, add the code below to "Calendar.prototype.generateHTML" function:

html += '%lt;th colspan="1" align="left" id="previousmonth">%lt;a href="javascript:previousmonth('+currentMonth+','+ currentYear+')">previous month%lt;/a>%lt;/th>';
html += '%lt;th colspan="5" align="center">' + monthName + " " + this.year ;
html += '%lt;th colspan="1" align="right">%lt;a href="javascript:nextmonth('+currentMonth+','+ currentYear+')">next month%lt;/a>%lt;/th>';

5) code the previous and next months javascript functions

function nextmonth(month, year)
{
var nextMnth = month + 1;
if(nextMnth > 11)
{
nextMnth = 0;
year = year + 1;
}
var cal = new Calendar(nextMnth,year);
cal.generateHTML();
document.getElementById('calendarID').innerHTML = cal.getHTML();
}

function previousmonth(month ,year)
{
var prevMonth = month - 1;
if(prevMonth < 0)
{
prevMonth = 11;
year = year - 1;
}
var cal = new Calendar(prevMonth,year);
cal.generateHTML();
document.getElementById('calendarID').innerHTML = cal.getHTML();
}

The complete code is below:

%lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
%lt;html lang=en xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
%lt;head>
%lt;style type="text/css">
.calendar-table{
width : 100%;
border : 1px solid black;
}

.calendar-header{

}

.calendar-header-day {
width:14% ;
align:center;
border : 1px solid green;
}

.calendar-day{
height : 100px;
padding : 2px;
border : 1px solid blue;
}
%lt;/style>
%lt;script type="text/javascript">
//credit to http://jszen.blogspot.com/2007/03/how-to-build-simple-calendar-with.html for the logic

// these are labels for the days of the week
cal_days_labels = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

// these are human-readable month name labels, in order
cal_months_labels = ['January', 'February', 'March', 'April',
'May', 'June', 'July', 'August', 'September',
'October', 'November', 'December'];

// these are the days of the week for each month, in order
cal_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

// this is the current date
cal_current_date = new Date();

var currentMonth;
var currentYear;
function Calendar(month, year) {
this.month = (isNaN(month) || month == null) ? cal_current_date.getMonth() : month;
this.year = (isNaN(year) || year == null) ? cal_current_date.getFullYear() : year;
this.html = '';
currentMonth=this.month;
currentYear=this.year;
}

Calendar.prototype.generateHTML = function(){
var xmlDoc;
parseXML();
// get first day of month
var firstDay = new Date(this.year, this.month, 1);
var startingDay = firstDay.getDay();

// find number of days in month
var monthLength = cal_days_in_month[this.month];

// compensate for leap year
if (this.month == 1) { // February only!
if((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0){
monthLength = 29;
}
}

// do the header
var monthName = cal_months_labels[this.month]
var html = '%lt;table class="calendar-table" cellspacing="1" cellpadding="2">';
html += '%lt;tr>';
html += '%lt;th colspan="1" align="left" id="previousmonth">%lt;a href="javascript:previousmonth('+currentMonth+','+ currentYear+')">previous month%lt;/a>%lt;/th>';
html += '%lt;th colspan="5" align="center">' + monthName + " " + this.year ;
html += '%lt;th colspan="1" align="right">%lt;a href="javascript:nextmonth('+currentMonth+','+ currentYear+')">next month%lt;/a>%lt;/th>';
html += '%lt;/th>%lt;/tr>';
html += '%lt;tr class="calendar-header">';
for(var i = 0; i %lt;= 6; i++ ){
html += '%lt;td class="calendar-header-day">';
html += cal_days_labels[i];
html += '%lt;/td>';
}
html += '%lt;/tr>%lt;tr>';


// fill in the days
var day = 1;
var tempMonth = this.month;
var tempYear = this.year ;
// this loop is for is weeks (rows)
for (var i = 0; i %lt; 9; i++) {
// this loop is for weekdays (cells)
for (var j = 0; j %lt;= 6; j++) {
html += '%lt;td class="calendar-day" valign="top">';
if (day %lt;= monthLength && (i > 0 || j >= startingDay)) {
html += day ;
html += getDayEvents(tempYear, tempMonth, day);
day++;
}
html += '%lt;/td>';
}
// stop making rows if we've run out of days
if (day > monthLength) {
break;
} else {
html += '%lt;/tr>%lt;tr>';
}
}
html += '%lt;/tr>%lt;/table>';

this.html = html;

function parseXML()
{
try
{ //try IE first
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
catch(e)
{
try
{ //try Mozilla, Firefox, Opera, etc.
xmlDoc=document.implementation.createDocument("","",null);
}
catch(e)
{
alert(e.message);
return;
}
}
xmlDoc.async=false;
xmlDoc.load("CalendarEvents.xml");

}

function getDayEvents(year, month, day)
{
var dayevents = "&nbsp";
var tempmonth = month + 1;

var rowcount=xmlDoc.getElementsByTagName('days');
var found = false;

for(ii=0; !found && ii%lt;rowcount.length;ii++)
{
if ( (rowcount[ii].getAttribute('id') == day) && (rowcount[ii].parentNode.getAttribute('id') == tempmonth)
&& (rowcount[ii].parentNode.parentNode.getAttribute('id') == year) )
{
for(jj=0;jj%lt;rowcount[ii].childNodes.length;jj++)
{
if (rowcount[ii].childNodes[jj].text != "undefined")
{
dayevents += rowcount[ii].childNodes[jj].text;
}
}
found = true;
}
}

return dayevents;
}


}

Calendar.prototype.getHTML = function() {
return this.html;
}

function nextmonth(month, year)
{
var nextMnth = month + 1;
if(nextMnth > 11)
{
nextMnth = 0;
year = year + 1;
}
var cal = new Calendar(nextMnth,year);
cal.generateHTML();
document.getElementById('calendarID').innerHTML = cal.getHTML();
}

function previousmonth(month ,year)
{
var prevMonth = month - 1;
if(prevMonth %lt; 0)
{
prevMonth = 11;
year = year - 1;
}
var cal = new Calendar(prevMonth,year);
cal.generateHTML();
document.getElementById('calendarID').innerHTML = cal.getHTML();
}

function init()
{
var now = new Date();

var cal = new Calendar(now.getMonth(),now.getFullYear());
cal.generateHTML();
document.getElementById('calendarID').innerHTML = cal.getHTML();
}
%lt;/script>

%lt;/head>
%lt;body onload="init()">

%lt;div id="calendarID">%lt;/div>
%lt;/body>
%lt;/HTML>