Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Calendar works in Firefox, not in IE

Status
Not open for further replies.

Neophytita

Technical User
Joined
Mar 24, 2006
Messages
3
Location
CA
I am a graphic designer, new to codes beyond HTML and CSS. I volunteered to create a website for my mother's group, and they were very happy with the basics but wanted an events calendar. I found a simple one at which I incorported into one of my html pages following instructions carefully. I altered the codes slightly (made the calendar appear as 1 column instead of 3, changed the text, etc.)

It looks and works great in Firefox but when I looked at the page in IE 6, all the page elements were scattered across the screen willy-nilly.

It took me hours of experimentation (because I don't know a thing about javascript) to figure out that what was causing the problem was the code that was to be inserted in the body tag:
<body onload="changedate('return')">

When that code is in the body tag, I get chaos in IE. When it is removed, all looks good in both browsers, but the calendar does not appear. I know from painful experience that IE has quirks, but fixing this is beyond me. Can anyone help me out with a (simple) solution? Thanks.
 
The code says it works in IE and "firebox" (their typo not mine). I'm guessing that you changed something when you changed the format... Can you post your code?

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook
 
Rather than copy the entire page and paste it here (which is huge), I'll try to reduce it into meaningful chunks:

My html page starts here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" " xmlns=" xml:lang="en"

lang="en" >
<head>
<title>Knox</title>
<meta http-equiv="content-type"

content="text/html;charset=utf-8" />
<link rel="stylesheet" href="knox.css" type="text/css" />

I moved the calendar code regarding <style> into my CSS (it all works fine).

I then copied the calendar-code from...

<script language="JavaScript" type="text/javascript" src="events.js"></script>

<script type="text/JavaScript" language="JavaScript">

/* Preload images script */
var myimages=new Array()

... down to...

return dayofmonth;
}

</script>

... and pasted it before my </head> tag, without making a single change.

I changed the <body> tag to read:
<body onload="changedate('return')">

And here's the rest of my page which follows the <body> tag:

<div id="container" >
<div id="banner">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2"><img src="images/stain1a.jpg" alt="Stained glass window" width="130" height="120"></td>
<td rowspan="2"><img src="images/knox.jpg" alt="Knox title" width="185" height="120"></td>
<td class="home" align="left"><br><a href="index.html" target="_self" title="Knox Home" name="Knox Home">home</a><br><img src="images/rose.jpg" alt="rose" width="95" height="65"></td>
<td class="contact">(contact info here)</td>
<td rowspan="2"><img src="images/stain2a.jpg" alt="Stained glass window" width="130" height="120"></td>
</tr>
<tr>
<td colspan="2" class="nav">

<table margin="0" border="0" cellspacing="0" cellpadding="0"><tr>
<td class="nav"><a href="activities.html" target="_self"

name="Activities" title="Activities">activities</a></td>
<td class="nav"><a href="programs.html" target="_self" name="Programs" title="Programs">programs</a></td>
<td class="nav"><a href="committees.html" target="_self" name="Committees" title="Committees">committees</a></td>
<td class="nav"><a href="calendar.html" target="_self" name="Calendar" title="Calendar">calendar</a></td>
<td class="nav"><a href="faq.html" target="_self" name="Frequently Asked Questions" title="Frequently Asked Questions">faq</a></td>
</tr></table>
</td>
</tr>
</table>
</div>



<div id="outer"><div id="inner"><div id="left">
<img src="images/stain1c.jpg" width="130" height="235" alt="stained glass window" border="0"><p>Calendar script provided by<br><a href=" Kit</a></p>

</div>
<div id="right"><img src="images/stain2b.jpg" alt="Stained glass window" width="130" height="110"><img src="images/stain2c.jpg" alt="Stained glass window" width="130" height="235">
</div>
<div id="content">
<img src="images/corner-left.jpg" width="80" height="71" alt="left corner" border="0" align="left"><img src="images/corner-right.jpg" width="80" height="71" alt="right corner" border="0" align="right">
<p>&nbsp;</p>

<h1>Calendar of Events</h1>

<table id="evtcal" border="0" cellpadding="0" cellspacing="0" width="318" align="center">
<tr><td>Click a highlighted date on the calendar to see a list of events on that day in the box below.</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td style="padding: 3px;" align="center" bgcolor="#000000" valign="top" width="314"><div id="calendar"></div></td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td align="center"><b>Events:</b><form id="eventform" name="eventform" action="#" method="get"><textarea name="eventlist" cols="35" rows="11" wrap="soft">Click on a date in the calendar to see an event.</textarea></form></td></tr>
</table>

</div>
</div>
<div class="clear">&nbsp;<div>
</div>
<div id="footer">&nbsp;</div>
</div>
</body>
</html>

Thank you for your help with this!
 
I can't duplicate your error... This page loads fine (sans images) in IE and Firefox
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html[/URL] xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" 

lang="en" >
<head>
<title>Knox</title>
<meta http-equiv="content-type" 

content="text/html;charset=utf-8" />
<style type="text/css">

#evtcal a:link {font: normal 12pt "Arial", "Helvetica", "Sans Serif"; color: #004400; text-decoration: none;}		/* unvisited link */
#evtcal a:visited {font: normal 12pt "Arial", "Helvetica", "Sans Serif"; color: #004400; text-decoration: none;}	/* visited link */
#evtcal a:hover {font: normal 12pt "Arial", "Helvetica", "Sans Serif"; color: #004400; text-decoration: underline;}	/* mouse over link */
#evtcal a:active {font: normal 12pt "Arial", "Helvetica", "Sans Serif"; color: #004400; text-decoration: none;}		/* selected link */

</style>

<script type="text/JavaScript" language="JavaScript">
// This is the Database of Upcoming Events
// Please Edit with Care.
//
// 8 Fields (surrounded by brackets[]) are used for EACH event:
// 	["Recurring", "Month", "Day", "Year", "StartTime", "EndTime", "Name", "Description"]
// 	Each event field must be be surrounded by quotation marks followed by a comma ("",) EXCEPT the "Description" field.
//	The "Description" field is surrounded by quotation marks only ("").
//
// Each event has a comma after the closing bracket IF another event is below it on the next line down.
//	Note: The last event in this file should NOT have a comma after the closing bracket
//
// The Recurring field uses:
//	"D" = Daily; "W" = Weekly; "M" = Monthly; "Y" = Yearly; "F" = Floating Holiday
//
// One Time only events should leave the Recurring field blank
//	(ex. "")
//
// Daily events do NOT require that anything be in the Month Day and Year fields
//	Everything in the Month Day and Year fields will be ignored
//
// Weekly events should have the day of the week field set to 1 - 7
//	1=Sunday, 2=Monday, 3=Tuesday, 4=Wednesday, 5=Thurday, 6=Friday, 7=Saturday
//
// "F"loating events uses:
//	the Month field for the Month.
//	the Day field as the Cardinal Occurrence
//		1=1st, 2=2nd, 3=3rd, 4=4th, 5=5th, 6=6th occurrence of the day listed next
//	the Year field as the Day of the week the event/holiday falls on
//		1=Sunday, 2=Monday, 3=Tuesday, 4=Wednesday, 5=Thurday, 6=Friday, 7=Saturday
//	example: "F",	"1",	"3",	"2", = Floating holiday in January on the 3rd Monday of that month.
//
//	Note: Easter has it's own special formula so Please don't change anything related to Easter below
//
// "Y"early events are specific dates that never change - the Year field is ignored
//	example - Christmas is: "12","25","",
events = new Array(
	["Y",	"1",	"1",	"2006",	"1:00 AM",	"12:00 PM",	"New Year's Day",	"New Year's Day will be ushered in with great joy and celebration. Come as you are."],
	["F",	"1",	"3",	"2",	"1:00 AM",	"12:59 PM",	"Martin Luther King Day",	"Honors civil rights leader Rev Martin Luther King."],
	["Y",	"2",	"2",	"2005",	"1:00 AM",	"12:59 PM",	"Groundhog Day",	"If Philadelphia's groundhog 'Punxsutawney Phil' sees his shadow, there will be six more weeks of winter weather. If he does not see his shadow, there will be an early spring."],
	["Y",	"2",	"14",	"2005",	"1:00 AM",	"12:59 PM",	"Valentine's Day",	"Traditional celebration of love and romance, including the exchange of cards, candy, flowers, and other gifts."],
	["F",	"2",	"3",	"2",	"1:00 AM",	"12:59 PM",	"President's Day",	"Honors the birthdays of George Washington, Abraham Lincoln and other past American Presidents."],
	["F",	"3",	"0",	"0",	"1:00 AM",	"12:59 PM",	"Easter",	"Traditional celebration of the resurrection of Jesus Christ."],
	["Y",	"3",	"17",	"2005",	"1:00 AM",	"12:59 PM",	"St. Patrick's Day",	"A celebration of Irish heritage and culture, based on the Catholic feast of St. Patrick. Primary activity is simply the wearing of green clothing ('wearing of the green')."],
	["Y",	"3",	"22",	"2005",	"1:00 AM",	"12:59 PM",	"World Water Day",	"A day to promote appreciation of the world's most valuable commodity - water."],
	["Y",	"4",	"1",	"2005",	"1:00 AM",	"12:59 PM",	"April Fool's Day",	"A day to play tricks on or 'fool' family, friends, and coworkers, if so inclined. As Ecclesiastes says: 'There is a time for everything'; in this case, a time to be silly."],
	["F",	"5",	"2",	"1",	"1:00 AM",	"12:59 PM",	"Mother's Day",	"Honors mothers and motherhood (made a Federal Holiday by Presidential order)."],
	["F",	"5",	"3",	"7",	"1:00 AM",	"12:59 PM",	"Armed Forces Day",	"Celebrates the United States Army, Navy, Air Force and Marine Corps; formerly - each used to have separate days."],
	["F",	"5",	"4",	"2",	"1:00 AM",	"12:59 PM",	"Memorial Day",	"Honors the nation's war dead, and those we love who have passed away. Traditionally a time to decorate graves and remember those who have gone before us. Also marks traditional beginning of summer."],
	["Y",	"6",	"14",	"2005",	"1:00 AM",	"12:59 PM",	"Flag Day",	"Honors the American flag, encourages patriotism. Citizens are urged to fly the flag and study its traditions."],
	["F",	"6",	"3",	"1",	"1:00 AM",	"12:59 PM",	"Father's Day",	"Honors all Fathers and fatherhood."],
	["Y",	"7",	"4",	"2005",	"1:00 AM",	"12:59 PM",	"Independence Day",	"Celebrates our Declaration of Independence from England in 1776, usually called the Fourth of July."],
	["F",	"9",	"1",	"2",	"1:00 AM",	"12:59 PM",	"Labor Day",	"Celebrates the achievements of workers, giving them a day of rest - marks traditional end of summer."],
	["F",	"10",	"2",	"2",	"1:00 AM",	"12:59 PM",	"Columbus' Day",	"Honors the traditional discovery of the Americas by Christopher Columbus."],
	["Y",	"10",	"31",	"2005",	"1:00 AM",	"12:59 PM",	"Halloween",	"Celebrates All Hallow's Eve, decorations include jack o'lanterns, costume wearing parties, and candy - considered a pagan holiday by many Christians."],
	["Y",	"11",	"11",	"2005",	"1:00 AM",	"12:59 PM",	"Veteran's Day",	"Honors all veterans of the United States armed forces. A traditional observation is a moment of silence at 11 AM remembering those who fought for peace."],
	["F",	"11",	"4",	"5",	"1:00 AM",	"12:59 PM",	"Thanksgiving",	"A day to give thanks for your many blessings - traditionally for the Autumn harvest, and it marks the beginning of the 'holiday season'."],
	["Y",	"12",	"25",	"2005",	"1:00 AM",	"12:59 PM",	"Christmas",	"Celebration of the traditional day of Jesus' birth - God was made flesh and dwelt among us."]
// Please omit the final comma after the ] from the last line above unless you are going to add another event at this time.
);


/* Preload images script */
var myimages=new Array()

function preloadimages(){
	for (i=0;i<preloadimages.arguments.length;i++){
		myimages[i]=new Image();
		myimages[i].src=preloadimages.arguments[i];
	}
}


/* The path of images to be preloaded inside parenthesis: (Extend list as desired.) */
preloadimages("images/PrevYrOff40x40.jpg", "images/PrevYrOn40x40.jpg","images/PrevMoOff40x40.jpg", "images/PrevMoOn40x40.jpg","images/NextYrOff40x40.jpg", "images/NextYrOn40x40.jpg","images/NextMoOff40x40.jpg","images/NextMoOn40x40.jpg");


/***************************************************************************************
	JavaScript Calendar - Digital Christian Design
	// Functions
		changedate(): Moves to next or previous month or year, or current month depending on the button clicked.
		createCalendar(): Renders the calander into the page with links for each to fill the date form filds above.
			
***************************************************************************************/

var thisDate = 1;							// Tracks current date being written in calendar
var wordMonth = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var today = new Date();							// Date object to store the current date
var todaysDay = today.getDay() + 1;					// Stores the current day number 1-7
var todaysDate = today.getDate();					// Stores the current numeric date within the month
var todaysMonth = today.getUTCMonth() + 1;				// Stores the current month 1-12
var todaysYear = today.getFullYear();					// Stores the current year
var monthNum = todaysMonth;						// Tracks the current month being displayed
var yearNum = todaysYear;						// Tracks the current year being displayed
var firstDate = new Date(String(monthNum)+"/1/"+String(yearNum));	// Object Storing the first day of the current month
var firstDay = firstDate.getUTCDay();					// Tracks the day number 1-7 of the first day of the current month
var lastDate = new Date(String(monthNum+1)+"/0/"+String(yearNum));	// Tracks the last date of the current month
var numbDays = 0;
var calendarString = "";
var eastermonth = 0;
var easterday = 0;


function changedate(buttonpressed) {
	if (buttonpressed == "prevyr") yearNum--;
	else if (buttonpressed == "nextyr") yearNum++;
	else if (buttonpressed == "prevmo") monthNum--;
	else if (buttonpressed == "nextmo") monthNum++;
	else  if (buttonpressed == "return") { 
		monthNum = todaysMonth;
		yearNum = todaysYear;
	}

	if (monthNum == 0) {
		monthNum = 12;
		yearNum--;
	}
	else if (monthNum == 13) {
		monthNum = 1;
		yearNum++
	}

	lastDate = new Date(String(monthNum+1)+"/0/"+String(yearNum));
	numbDays = lastDate.getDate();
	firstDate = new Date(String(monthNum)+"/1/"+String(yearNum));
	firstDay = firstDate.getDay() + 1;
	createCalendar();
	return;
}


function easter(year) {
// feed in the year it returns the month and day of Easter using two GLOBAL variables: eastermonth and easterday
var a = year % 19;
var b = Math.floor(year/100);
var c = year % 100;
var d = Math.floor(b/4);
var e = b % 4;
var f = Math.floor((b+8) / 25);
var g = Math.floor((b-f+1) / 3);
var h = (19*a + b - d - g + 15) % 30;
var i = Math.floor(c/4);
var j = c % 4;
var k = (32 + 2*e + 2*i - h - j) % 7;
var m = Math.floor((a + 11*h + 22*k) / 451);
var month = Math.floor((h + k - 7*m + 114) / 31);
var day = ((h + k - 7*m +114) % 31) + 1;
eastermonth = month;
easterday = day;
}


function createCalendar() {
	calendarString = '';
	var daycounter = 0;
	calendarString += '<table width="312" border="1" cellpadding="0" cellspacing="1">';
	calendarString += '<tr>';
	calendarString += '<td align=\"center\" valign=\"center\" width=\"40\" height=\"40\"><a href=\"#\" onMouseOver=\"document.PrevYr.src=\'images\/PrevYrOn40x40\.jpg\';\" onMouseOut=\"document.PrevYr.src=\'images\/PrevYrOff40x40\.jpg\';\" onClick=\"changedate(\'prevyr\')\"><img name=\"PrevYr\" src=\"images\/PrevYrOff40x40\.jpg\" width=\"40\" height=\"40\" border=\"0\" alt=\"Prev Yr\"\/><\/a><\/td>';
	calendarString += '<td align=\"center\" valign=\"center\" width=\"40\" height=\"40\"><a href=\"#\" onMouseOver=\"document.PrevMo.src=\'images\/PrevMoOn40x40\.jpg\';\" onMouseOut=\"document.PrevMo.src=\'images\/PrevMoOff40x40\.jpg\';\" onClick=\"changedate(\'prevmo\')\"><img name=\"PrevMo\" src=\"images\/PrevMoOff40x40\.jpg\" width=\"40\" height=\"40\" border=\"0\" alt=\"Prev Mo\"\/><\/a><\/td>';
	calendarString += '<td bgcolor=\"#C8C896\" align=\"center\" valign=\"center\" width=\"128\" height=\"40\" colspan=\"3\"><b>' + wordMonth[monthNum-1] + '&nbsp;&nbsp;' + yearNum + '<\/b><\/td>';
	calendarString += '<td align=\"center\" valign=\"center\" width=\"40\" height=\"40\"><a href=\"#\" onMouseOver=\"document.NextMo.src=\'images\/NextMoOn40x40\.jpg\';\" onMouseOut=\"document.NextMo.src=\'images\/NextMoOff40x40\.jpg\';\" onClick=\"changedate(\'nextmo\')\"><img name=\"NextMo\" src=\"images\/NextMoOff40x40\.jpg\" width=\"40\" height=\"40\" border=\"0\" alt=\"Next Mo\"\/><\/a><\/td>';
	calendarString += '<td align=\"center\" valign=\"center\" width=\"40\" height=\"40\"><a href=\"#\" onMouseOver=\"document.NextYr.src=\'images\/NextYrOn40x40\.jpg\';\" onMouseOut=\"document.NextYr.src=\'images\/NextYrOff40x40\.jpg\';\" onClick=\"changedate(\'nextyr\')\"><img name=\"NextYr\" src=\"images\/NextYrOff40x40\.jpg\" width=\"40\" height=\"40\" border=\"0\" alt=\"Next Yr\"\/><\/a><\/td>';
	calendarString += '<\/tr>';
	calendarString += '<tr>';
	calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Sun<\/td>';
	calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Mon<\/td>';
	calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Tue<\/td>';
	calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Wed<\/td>';
	calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Thu<\/td>';
	calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Fri<\/td>';
	calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Sat<\/td>';
	calendarString += '<\/tr>';

	thisDate == 1;

	for (var i = 1; i <= 6; i++) {
		calendarString += '<tr>';
		for (var x = 1; x <= 7; x++) {
			daycounter = (thisDate - firstDay)+1;
			thisDate++;
			if ((daycounter > numbDays) || (daycounter < 1)) {
				calendarString += '<td align=\"center\" bgcolor=\"#888888\" height=\"30\" width=\"40\">&nbsp;<\/td>';
			} else {
				if (checkevents(daycounter,monthNum,yearNum,i,x) || ((todaysDay == x) && (todaysDate == daycounter) && (todaysMonth == monthNum))){
					if ((todaysDay == x) && (todaysDate == daycounter) && (todaysMonth == monthNum)) {
						calendarString += '<td align=\"center\" bgcolor=\"#AAFFAA\" height=\"30\" width=\"40\"><a href=\"javascript:showevents(' + daycounter + ',' + monthNum + ',' + yearNum + ',' + i + ',' + x + ')\">' + daycounter + '<\/a><\/td>';
					}
 					else	calendarString += '<td align=\"center\" bgcolor=\"#FFFFC8\" height=\"30\" width=\"40\"><a href=\"javascript:showevents(' + daycounter + ',' + monthNum + ',' + yearNum + ',' + i + ',' + x + ')\">' + daycounter + '<\/a><\/td>';
				} else {
					calendarString += '<td align=\"center\" bgcolor=\"#DDFFFF\" height=\"30\" width=\"40\">' + daycounter + '<\/td>';
				}
			}
		}
		calendarString += '<\/tr>';
	}

	calendarString += '<tr><td colspan=\"7\" nowrap align=\"center\" valign=\"center\" bgcolor=\"#C8C896\" width=\"280\" height=\"22\"><a href=\"javascript:changedate(\'return\')\"><b>Show Current Date<\/b><\/a><\/td><\/tr><\/table>';

	var object=document.getElementById('calendar');
	object.innerHTML= calendarString;
	thisDate = 1;
}


function checkevents(day,month,year,week,dayofweek) {
var numevents = 0;
var floater = 0;

	for (var i = 0; i < events.length; i++) {
		if (events[i][0] == "W") {
			if ((events[i][2] == dayofweek)) numevents++;
		}
		else if (events[i][0] == "Y") {
			if ((events[i][2] == day) && (events[i][1] == month)) numevents++;
		}
		else if (events[i][0] == "F") {
			if ((events[i][1] == 3) && (events[i][2] == 0) && (events[i][3] == 0) ) {
				easter(year);
				if (easterday == day && eastermonth == month) numevents++;
			} else {
				floater = floatingholiday(year,events[i][1],events[i][2],events[i][3]);
				if ((month == 5) && (events[i][1] == 5) && (events[i][2] == 4) && (events[i][3] == 2)) {
					if ((floater + 7 <= 31) && (day == floater + 7)) {
						numevents++;
					} else if ((floater + 7 > 31) && (day == floater)) numevents++;
				} else if ((events[i][1] == month) && (floater == day)) numevents++;
			}
		}
		else if ((events[i][2] == day) && (events[i][1] == month) && (events[i][3] == year)) {
			numevents++;
		}
	}

	if (numevents == 0) {
		return false;
	} else {
		return true;
	}
}


function showevents(day,month,year,week,dayofweek) {
var theevent = "";
var floater = 0;

	for (var i = 0; i < events.length; i++) {
		// First we'll process recurring events (if any):
		if (events[i][0] != "") {
			if (events[i][0] == "D") {
			}
			if (events[i][0] == "W") {
				if ((events[i][2] == dayofweek)) {
				theevent += "Events of: \n" + month +'/'+ day +'/'+ year + '\n';
				theevent += events[i][6] + '\n';
				theevent += 'Start Time: ' + events[i][4] + '\n';
				theevent += 'Ending Time: ' + events[i][5] + '\n';
				theevent += 'Description: ' + events[i][7] + '\n';
				theevent += '\n -------------- \n\n';
				document.forms.eventform.eventlist.value = theevent;
				}
			}
			if (events[i][0] == "M") {
			}
			if (events[i][0] == "Y") {
				if ((events[i][2] == day) && (events[i][1] == month)) {
				theevent += "Events of: \n" + month +'/'+ day +'/'+ year + '\n';
				theevent += events[i][6] + '\n';
				theevent += 'Start Time: ' + events[i][4] + '\n';
				theevent += 'Ending Time: ' + events[i][5] + '\n';
				theevent += 'Description: ' + events[i][7] + '\n';
				theevent += '\n -------------- \n\n';
				document.forms.eventform.eventlist.value = theevent;
				}
			}
			if (events[i][0] == "F") {
				if ((events[i][1] == 3) && (events[i][2] == 0) && (events[i][3] == 0) ) {
					if (easterday == day && eastermonth == month) {
						theevent += "Events of: \n" + month +'/'+ day +'/'+ year + '\n';
						theevent += events[i][6] + '\n';
						theevent += 'Start Time: ' + events[i][4] + '\n';
						theevent += 'Ending Time: ' + events[i][5] + '\n';
						theevent += 'Description: ' + events[i][7] + '\n';
						theevent += '\n -------------- \n\n';
						document.forms.eventform.eventlist.value = theevent;
					} 
				} else {
					floater = floatingholiday(year,events[i][1],events[i][2],events[i][3]);

					if ((month == 5) && (events[i][1] == 5) && (events[i][2] == 4) && (events[i][3] == 2)) {
						if ((floater + 7 <= 31) && (day == floater + 7)) {
							theevent += "Events of: \n" + month +'/'+ day +'/'+ year + '\n';
							theevent += events[i][6] + '\n';
							theevent += 'Start Time: ' + events[i][4] + '\n';
							theevent += 'Ending Time: ' + events[i][5] + '\n';
							theevent += 'Description: ' + events[i][7] + '\n';
							theevent += '\n -------------- \n\n';
							document.forms.eventform.eventlist.value = theevent;
						} else if ((floater + 7 > 31) && (day == floater)) {
							theevent += "Events of: \n" + month +'/'+ day +'/'+ year + '\n';
							theevent += events[i][6] + '\n';
							theevent += 'Start Time: ' + events[i][4] + '\n';
							theevent += 'Ending Time: ' + events[i][5] + '\n';
							theevent += 'Description: ' + events[i][7] + '\n';
							theevent += '\n -------------- \n\n';
							document.forms.eventform.eventlist.value = theevent;
						}
					} else if ((events[i][1] == month) && (floater == day)) {
						theevent += "Events of: \n" + month +'/'+ day +'/'+ year + '\n';
						theevent += events[i][6] + '\n';
						theevent += 'Start Time: ' + events[i][4] + '\n';
						theevent += 'Ending Time: ' + events[i][5] + '\n';
						theevent += 'Description: ' + events[i][7] + '\n';
						theevent += '\n -------------- \n\n';
						document.forms.eventform.eventlist.value = theevent;
					}
				}
		}
		}
		// Now we'll process any One Time events happening on the matching month, day, year:
		else if ((events[i][2] == day) && (events[i][1] == month) && (events[i][3] == year)) {
			theevent += "Events of: \n" + month +'/'+ day +'/'+ year + '\n';
			theevent += events[i][6] + '\n';
			theevent += 'Start Time: ' + events[i][4] + '\n';
			theevent += 'Ending Time: ' + events[i][5] + '\n';
			theevent += 'Description: ' + events[i][7] + '\n';
			theevent += '\n -------------- \n\n';
			document.forms.eventform.eventlist.value = theevent;
		}
	}
	if (theevent == "") document.forms.eventform.eventlist.value = 'No events to show.';
}


function floatingholiday(targetyr,targetmo,cardinaloccurrence,targetday) {
// Floating holidays/events of the events.js file uses:
//	the Month field for the Month (here it becomes the targetmo field)
//	the Day field as the Cardinal Occurrence  (here it becomes the cardinaloccurrence field)
//		1=1st, 2=2nd, 3=3rd, 4=4th, 5=5th, 6=6th occurrence of the day listed next
//	the Year field as the Day of the week the event/holiday falls on  (here it becomes the targetday field)
//		1=Sunday, 2=Monday, 3=Tuesday, 4=Wednesday, 5=Thurday, 6=Friday, 7=Saturday
//	example: "F",	"1",	"3",	"2", = Floating holiday in January on the 3rd Monday of that month.
//
// In our code below:
// 	targetyr is the active year
// 	targetmo is the active month (1-12)
// 	cardinaloccurrence is the xth occurrence of the targetday (1-6)
// 	targetday is the day of the week the floating holiday is on
//		0=Sun; 1=Mon; 2=Tue; 3=Wed; 4=Thu; 5=Fri; 6=Sat
//		Note: subtract 1 from the targetday field if the info comes from the events.js file
//
// Note:
//	If Memorial Day falls on the 22nd, 23rd, or 24th, then we add 7 to the dayofmonth to the result.
//
// Example: targetyr = 2052; targetmo = 5; cardinaloccurrence = 4; targetday = 1
//	This is the same as saying our floating holiday in the year 2052, is during May, on the 4th Monday
//
var firstdate = new Date(String(targetmo)+"/1/"+String(targetyr));	// Object Storing the first day of the current month.
var firstday = firstdate.getUTCDay();	// The first day (0-6) of the target month.
var dayofmonth = 0;	// zero out our calendar day variable.

	targetday = targetday - 1;

	if (targetday >= firstday) {
		cardinaloccurrence--;	// Subtract 1 from cardinal day.
		dayofmonth = (cardinaloccurrence * 7) + ((targetday - firstday)+1);
	} else {
		dayofmonth = (cardinaloccurrence * 7) + ((targetday - firstday)+1);
	}
return dayofmonth;
}

</script>

<body onload="changedate('return')">


<div id="container" >
    <div id="banner">
    <table border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td rowspan="2"><img src="images/stain1a.jpg" alt="Stained glass window" width="130" height="120"></td>
    <td rowspan="2"><img src="images/knox.jpg" alt="Knox title" width="185" height="120"></td>
    <td class="home" align="left"><br><a href="index.html" target="_self" title="Knox Home" name="Knox Home">home</a><br><img src="images/rose.jpg" alt="rose" width="95" height="65"></td>
    <td class="contact">(contact info here)</td>
    <td rowspan="2"><img src="images/stain2a.jpg" alt="Stained glass window" width="130" height="120"></td>
  </tr>
  <tr> 
    <td colspan="2" class="nav">

<table margin="0" border="0" cellspacing="0" cellpadding="0"><tr>
<td class="nav"><a href="activities.html" target="_self" 

name="Activities" title="Activities">activities</a></td>
    <td class="nav"><a href="programs.html" target="_self" name="Programs" title="Programs">programs</a></td>
<td class="nav"><a href="committees.html" target="_self" name="Committees" title="Committees">committees</a></td>
<td class="nav"><a href="calendar.html" target="_self" name="Calendar" title="Calendar">calendar</a></td>
<td class="nav"><a href="faq.html" target="_self" name="Frequently Asked Questions" title="Frequently Asked Questions">faq</a></td>
</tr></table>
</td>
  </tr>
  </table>
</div>



<div id="outer"><div id="inner"><div id="left">
<img src="images/stain1c.jpg" width="130" height="235" alt="stained glass window" border="0"><p>Calendar script provided by<br><a href="[URL unfurl="true"]http://www.javascriptkit.com">JavaScript[/URL] Kit</a></p>

</div>
<div id="right"><img src="images/stain2b.jpg" alt="Stained glass window" width="130" height="110"><img src="images/stain2c.jpg" alt="Stained glass window" width="130" height="235">
</div>
<div id="content">
<img src="images/corner-left.jpg" width="80" height="71" alt="left corner" border="0" align="left"><img src="images/corner-right.jpg" width="80" height="71" alt="right corner" border="0" align="right">
<p>&nbsp;</p>

<h1>Calendar of Events</h1>

<table id="evtcal" border="0" cellpadding="0" cellspacing="0" width="318" align="center">
    <tr><td>Click a highlighted date on the calendar to see a list of events on that day in the box below.</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td style="padding: 3px;" align="center" bgcolor="#000000" valign="top" width="314"><div id="calendar"></div></td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td align="center"><b>Events:</b><form id="eventform" name="eventform" action="#" method="get"><textarea name="eventlist" cols="35" rows="11" wrap="soft">Click on a date in the calendar to see an event.</textarea></form></td></tr>
</table>

</div>
</div>
<div class="clear">&nbsp;<div>
</div>
<div id="footer">&nbsp;</div>
</div>
</body>
</html>

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook
 
Thanks for your attempt to help, but I still had the same awful problem. However, by starting over, and adding code a bit at a time, I found the problem. It was in the navigation link:
<td class="nav"><a href="calendar.html" target="_self" name="Calendar" title="Calendar">calendar</a></td>

The javascript calendar's code contained:
id="calendar"
which obviously conflicted with my name="calendar" title="calendar"

When I changed the name and title to "calevent", the problem was solved!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top