Easy javascript calendar help, Need help with why my javascript is not displaying |
Easy javascript calendar help, Need help with why my javascript is not displaying |
richarda83 |
Mar 12 2013, 06:00 PM
Post
#1
|
Group: Members Posts: 4 Joined: 12-March 13 Member No.: 18,820 |
Hi,
Just started back up with html. I have a website folder where I have my index.html file, my main.css, images, and events.js. I cannot get my java script to load correctly. Please help. I will attach my index.htm file for viewing in your own editor or I will post below. Thanks! CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Fixed Width CSS Layouts - 2 Column - fw-18-2-col</title> <link rel="stylesheet" type="text/css" href="main.css" /> <script language="JavaScript" type="text/javascript" src="events.js"></script> <script type="text/JavaScript" language="JavaScript"> /* 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] + ' ' + 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\"> <\/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=\"java script:showevents(' + daycounter + ',' + monthNum + ',' + yearNum + ',' + i + ',' + x + ')\">' + daycounter + '<\/a><\/td>'; } else calendarString += '<td align=\"center\" bgcolor=\"#FFFFC8\" height=\"30\" width=\"40\"><a href=\"java script: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=\"java script: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> </head> <body> <!-- Begin Wrapper --> <div id="wrapper"> <!-- Begin Header --> <div id="header"> This is the Header </div> <!-- End Header --> <!-- Begin Navigation --> <div id="navigation"> This is the Navigation </div> <!-- End Navigation --> <!-- Begin Left Column --> <div id="leftcolumn"> Left Column </div> <!-- End Left Column --> <!-- Begin Right Column --> <div id="rightcolumn"> <center> <table id="evtcal" border="0" cellpadding="0" cellspacing="0" width="584"> <tbody> <tr> <td style="padding: 3px;" align="center" bgcolor="#aaddff" valign="top" width="314"> <div id="calendar"><!-- Dynamically Filled --></div> You can move to a different month or year by clicking on the buttons or return to today's date by clicking "Show Current Date".</td> <td width="10"> </td> <td style="padding: 3px;" align="center" bgcolor="#ffffc8" valign="top" width="260"><b>Intructions:</b><br />Click a highlighted date on the calendar to see a list of events on that day in the box below.<br /><br /> <center><b><u>Events</u></b> <form id="eventform" name="eventform" action="#" method="get"> <textarea name="eventlist" cols="25" rows="11" wrap="soft">Auto filled when clicking on date.</textarea> </form> </center> </td> </tr> </tbody> </table> </center><!--webbot bot="HTMLMarkup" endspan i-checksum="14116" --></p> <p><strong>Directions:</strong> Simply download the <b> <a href="evtcal.zip">following zip file</a></b>, and refer to the html page inside for the entire code.</p> <hr width="90%" size="1"> </div> <!-- End Right Column --> <!-- Begin Footer --> <div id="footer"> This is the Footer </div> <!-- End Footer --> </div> <!-- End Wrapper --> </body> </html> Attached File(s) index.html ( 17.25k ) Number of downloads: 283 main.css ( 1.24k ) Number of downloads: 265 |
pandy |
Mar 12 2013, 06:50 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
It's this one, right?
http://www.javascriptkit.com/script/script...scalendar.shtml Why not paste the bits and pieces in again since the script downloaded from there works? I see a comment is messed upp here: CODE / ******************************************************************************** ******* A multi line comment begins with /* and ends with */ . The space between the first / and the first * shouldn't be there and it isn't in the original script. Alas, that doesn't fix the problem, but it's probably part of it. |
richarda83 |
Mar 12 2013, 07:24 PM
Post
#3
|
Group: Members Posts: 4 Joined: 12-March 13 Member No.: 18,820 |
It's this one, right? http://www.javascriptkit.com/script/script...scalendar.shtml Why not paste the bits and pieces in again since the script downloaded from there works? I see a comment is messed upp here: CODE / ******************************************************************************** ******* A multi line comment begins with /* and ends with */ . The space between the first / and the first * shouldn't be there and it isn't in the original script. Alas, that doesn't fix the problem, but it's probably part of it. Well thats what i did. i copied and pasted from the source code from that site. So i see that if fixing the comment doesnt fix it, then where did I go wrong. I feel im pretty close but obviously off. |
pandy |
Mar 12 2013, 07:58 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Obviously you did a little more than that. That space didn't get there on its own.
Did you put events.js where it should be? I suspect you didn't. CODE <script language="JavaScript" type="text/javascript" src="events.js"></script> |
richarda83 |
Mar 12 2013, 09:11 PM
Post
#5
|
Group: Members Posts: 4 Joined: 12-March 13 Member No.: 18,820 |
Obviously you did a little more than that. That space didn't get there on its own. Did you put events.js where it should be? I suspect you didn't. CODE <script language="JavaScript" type="text/javascript" src="events.js"></script> Ya the events.js file is in the same folder as index. |
richarda83 |
Mar 12 2013, 09:18 PM
Post
#6
|
Group: Members Posts: 4 Joined: 12-March 13 Member No.: 18,820 |
could it possibly be that the images for the script arent loading? I have a images folder that came with the download that has the images inside it. but when i read the script is says myimages and i cant see where the script is grabbing the images from. idk. maybe thats not it. hoping someone can solve this. im quite perplexed
|
pandy |
Mar 13 2013, 05:40 AM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
No, the calendar isn't images. Fact is that what you posted works when I connect it to events.js .
|
Lo-Fi Version | Time is now: 29th March 2024 - 03:20 AM |