JavaScript two month calendar

I have JavaScript code to dispaly two month calendar days at a time, but i have a problem both month that disaplay at a time have same days (for example May and June has same days, June and July have same days etc.) Instate of correct days. Here is my code from 3 files.

calendr.js file:

isIE = (document.all ? true : false);
isDOM = (document.getElementById ? true : false);

// Initializing arrays
var months = new Array(“Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”, “Jul”,
“Aug”, “Sep”, “Oct”, “Nov”, “Dec”, “Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”, “Jul”,
“Aug”, “Sep”, “Oct”, “Nov”, “Dec”);
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,
30, 31, 30, 31, 31, 28, 31, 30, 31, 30, 31, 31,
30, 31, 30, 31);

var displayMonth = new Date().getMonth();
var displayYear = new Date().getFullYear();
var displayDivName;
var displayElement;

function getDays(month, year) {
// Check for leap year when February is selected
if (1 == month)
return ((0 == year % 4) && (0 != (year % 100))) ||
(0 == year % 400) ? 29 : 28;
else
return daysInMonth[month];

}

function getToday() {
// Create today’s date.
this.now = new Date();
this.year = this.now.getFullYear();
this.month = this.now.getMonth();
this.day = this.now.getDate();
}

// Start calendar with today
today = new getToday();

function newCalendar(eltName,attachedElement) {
if (attachedElement) {
if (displayDivName && displayDivName != eltName) hideElement(displayDivName);
displayElement = attachedElement;
}

displayDivName = eltName;
today = new getToday();
var parseYear = parseInt(displayYear + ”);
var newCal = new Date(parseYear,displayMonth,1);
var day = -1;
var startDayOfWeek = newCal.getDay();

if ((today.year == newCal.getFullYear()) &&
(today.month == newCal.getMonth()))
{
day = today.day;
}

var intDaysInMonth =
getDays(newCal.getMonth(), newCal.getFullYear());

var daysGrid = makeDaysGrid(startDayOfWeek,day,intDaysInMonth,new Cal,eltName)

if (isIE) {
var elt = document.all[eltName];
elt.innerHTML = daysGrid;
} else if (isDOM) {
var elt = document.getElementById(eltName);
elt.innerHTML = daysGrid;
} else {
var elt = document.layers[eltName].document;
elt.open();
elt.write(daysGrid);
elt.close();
}
}

function incMonth(delta,eltName) {
displayMonth = displayMonth+delta;
if (displayMonth >= 12) {
displayMonth = 0;
incYear(1,eltName);
} else if (displayMonth <= -1) {
displayMonth = 11;
incYear(-1,eltName);
} else {
newCalendar(eltName);
}
}

function incYear(delta,eltName) {
displayYear = parseInt(displayYear + ”) + delta;
newCalendar(eltName);
}

function makeDaysGrid(startDay,day,intDaysInMonth,newCal,el tName) {
var daysGrid;
var month = newCal.getMonth();
var year = newCal.getFullYear();
var isThisYear = (year == new Date().getFullYear());
var isThisMonth = (day > -1)

daysGrid = ‘<table border=1 cellspacing=0 cellpadding=2><tr><td bgcolor=#ffffff nowrap>’;
daysGrid += ‘<font face=”courier new, courier” size=2>’;
daysGrid += ‘&nbsp;&nbsp;’;

if (isThisMonth) {daysGrid += ‘&nbsp;&nbsp;’;}
else
{daysGrid += ‘<a href=”javascript:incMonth(-1,” + eltName + ”)”><img src=”https://images.hertz.com/misc/arrow_lft.gif” border=”0″ valign=”bottom”></a>’;}

daysGrid += ‘<b>’;
if (isThisMonth) { daysGrid += ‘<font color=#ffcc00>’ + months[month] + ‘</font>’; }
else { daysGrid += months[month]; }
daysGrid += ‘</b>’;

daysGrid += ‘&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;’;
daysGrid += months[month+1];

daysGrid += ‘<a href=”javascript:incMonth(1,” + eltName + ”)”><img src=”https://images.hertz.com/misc/arrow_rgt.gif” border=”0″ valign=”bottom”></a>’;
daysGrid += ‘&nbsp;&nbsp;&nbsp;’;

daysGrid += ‘&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=”javascript:hideElement(” + eltName + ”)”>x</a><br>’;
daysGrid += ‘<b>&nbsp;S&nbsp; M&nbsp; T&nbsp; W&nbsp; T&nbsp; F&nbsp; S&nbsp;</b>&nbsp;&nbsp;&nbsp;<br>’;

var dayOfMonthOfFirstSunday = (7 – startDay + 1);
for (var intWeek = 0; intWeek < 6; intWeek++) {
var dayOfMonth;
for (var intDay = 0; intDay < 7; intDay++) {
dayOfMonth = (intWeek * 7) + intDay + dayOfMonthOfFirstSunday – 7;

if (dayOfMonth <= 0) {
daysGrid += “&nbsp;&nbsp; “;
} else if (dayOfMonth <= intDaysInMonth) {
var color = “#3366AA”;
if (day > 0 && day == dayOfMonth) color=”#ffcc00″;

daysGrid += ‘<a href=”javascript:setDay(‘;
daysGrid += dayOfMonth + ‘,” + eltName + ”)” ‘
daysGrid += ‘style=”color:’ + color + ‘”>’;
var dayString = dayOfMonth + “</a> “;
if (dayString.length == 6) dayString = ‘0’ + dayString;
daysGrid += dayString;
}
}

if (dayOfMonth < intDaysInMonth) daysGrid += “<br>&nbsp;”;
}

daysGrid += ‘<br><br>’ + months[month+1] + ‘<br>’;

daysGrid += ‘<br><b>&nbsp;S&nbsp; M&nbsp; T&nbsp; W&nbsp; T&nbsp; F&nbsp; S&nbsp;</b><br>&nbsp;’;

var dayOfMonthOfFirstSunday = (7 – startDay + 1);
for (var intWeek = 0; intWeek < 6; intWeek++) {
var dayOfMonth;
for (var intDay = 0; intDay < 7; intDay++) {
dayOfMonth = (intWeek * 7) + intDay + dayOfMonthOfFirstSunday – 7;

if (dayOfMonth <= 0) {
daysGrid += “&nbsp;&nbsp; “;
} else if (dayOfMonth <= intDaysInMonth) {
var color = “#3366AA”;
if (day > 0 && day == dayOfMonth) color=”#ffcc00″;

daysGrid += ‘<a href=”javascript:setDay(‘;
daysGrid += dayOfMonth + ‘,” + eltName + ”)” ‘
daysGrid += ‘style=”color:’ + color + ‘”>’;
var dayString = dayOfMonth + “</a> “;
if (dayString.length == 6) dayString = ‘0’ + dayString;
daysGrid += dayString;
}
}

if (dayOfMonth < intDaysInMonth) daysGrid += “<br>&nbsp;”;
}

return daysGrid + “</td></tr></table>”;
}

function setDay(day,eltName) {
displayElement.value = (displayMonth + 1) + “/” + day + “/” + displayYear;
hideElement(eltName);
}

leisure_cal.js file:

isIE = (document.all ? true : false);
isDOM = (document.getElementById ? true : false);
function getAbsX(elt) { return (elt.x) ? elt.x : getAbsPos(elt,”Left”); }
function getAbsY(elt) { return (elt.y) ? elt.y : getAbsPos(elt,”Top”); }

function getAbsPos(elt,which) {
iPos = 0;
while (elt != null) {
iPos += elt[“offset” + which];
elt = elt.offsetParent;
}
return iPos;
}

function getDivStyle(divname) {
var style;
if (isDOM) { style = document.getElementById(divname).style; }
else { style = isIE ? document.all[divname].style
: document.layers[divname]; }
return style;
}

function hideElement(divname) {
getDivStyle(divname).visibility = ‘hidden’;
}

function moveBy(elt,deltaX,deltaY) {
elt.left = parseInt(elt.left) + deltaX;
elt.top = parseInt(elt.top) + deltaY;
}

function toggleVisible(divname) {
divstyle = getDivStyle(divname);
if (divstyle.visibility == ‘visible’ || divstyle.visibility == ‘show’) {
divstyle.visibility = ‘hidden’;
} else {
fixPosition(divname);
divstyle.visibility = ‘visible’;
}
}

function setPosition(elt,positionername,isPlacedUnder) {
var positioner;
if (isIE) {
positioner = document.all[positionername];
} else {
if (isDOM) {
positioner = document.getElementById(positionername);
} else {
positioner = document.images[positionername];
}
}
elt.left = getAbsX(positioner);
elt.top = getAbsY(positioner) + (isPlacedUnder ? positioner.height : 0);
}

calendar.html file:

<html>
<head><title>DHTML Calendar</title>
<script language=”JavaScript1.2″ src=”leisure_cal.js”></script>
<script language=”JavaScript1.2″ src=”calendar.js”></script>

<script language=”JavaScript1.2″>
<!–

function fixPosition(divname) {
divstyle = getDivStyle(divname);
positionerImgName = divname + ‘Pos’;
isPlacedUnder = false;
if (isPlacedUnder) {
setPosition(divstyle,positionerImgName,true);
} else {
setPosition(divstyle,positionerImgName)
}
}

function toggleDatePicker(eltName,formElt) {
var x = formElt.indexOf(‘.’);
var formName = formElt.substring(0,x);
var formEltName = formElt.substring(x+1);
newCalendar(eltName,document.forms[formName].elements[formEltName]);
toggleVisible(eltName);
}

function fixPositions()
{
fixPosition(‘daysOfMonth’);
fixPosition(‘daysOfMonth2’);

}

// –>
</script>

</head>

<body onresize=”fixPositions()”>

<form name=”date”>

<center>
<table border=0>
<tr>
<td>Pick-Up Date:&nbsp;</td>
<td><INPUT name=ret size=”10″ onmouseup=”toggleDatePicker(‘daysOfMonth’,’date.ret’)” id=daysOfMonthPos name=daysOfMonthPos align=absmiddle><div id=”daysOfMonth” style=”position:absolute;”></div></td>
</tr>

<tr>
<td>Return Date:&nbsp;</td>
<td><INPUT name=ret2 size=”10″ onmouseup=”toggleDatePicker(‘daysOfMonth2′,’date.ret2’)” id=daysOfMonth2Pos name=daysOfMonth2Pos align=absmiddle><div id=”daysOfMonth2″ style=”position:absolute;”></div></td>
</tr>
</table>
</center>

</form>

<SCRIPT language=JavaScript1.2>
function Cancel() {
hideElement(“daysOfMonth”);
}
</SCRIPT>

<script language=”JavaScript1.2″>
<!–
hideElement(‘daysOfMonth’);
hideElement(‘daysOfMonth2’);
//–>
</script>

Also in #JavaScript _↴