The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Easy javascript calendar help, Need help with why my javascript is not displaying
richarda83
post 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] + '&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=\"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">&nbsp;</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)
Attached File  index.html ( 17.25k ) Number of downloads: 283
Attached File  main.css ( 1.24k ) Number of downloads: 265
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
richarda83
post Mar 12 2013, 07:24 PM
Post #3





Group: Members
Posts: 4
Joined: 12-March 13
Member No.: 18,820



QUOTE(pandy @ Mar 12 2013, 06:50 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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. wink.gif

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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
richarda83
post Mar 12 2013, 09:11 PM
Post #5





Group: Members
Posts: 4
Joined: 12-March 13
Member No.: 18,820



QUOTE(pandy @ Mar 12 2013, 07:58 PM) *

Obviously you did a little more than that. That space didn't get there on its own. wink.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
richarda83
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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 .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 03:20 AM