Calender script using Javascript - no errors and no display

calDate is not defined...

/files/cal/cal.htm line: 30

<script type="text/javascript">
   yearly(calDate);                     <---------------- calDate not defined
</script>

Looking at your .js I see where you have the yearly function and it is expecting a variable that you will call calDate in the function, but then in the function you never do anything with calDate anyways.  You just check if it's null or not, and since it's not defined when you call yearly, it will always be null.  I don't know what you are expecting to pass, maybe a year?  If so, you need to define calDate in your htm file, and pass that to yearly, and then do something with it...

/*

   Function List:
   yearly(calendarDay)
      Creates the yearly calendar, highlighting the date
      specified in the calendarDay parameter.

   writeMonthCell(calendarDay, currentTime)
      Writes the yearly table cell containing a monthly
      calendar.

   writeMonth(calendarDay, currentTime)
      Creates the calendar table for the month specified in the
      calendarDay parameter. The currentTime parameter stores the
      time value of the current date.

   writeMonthTitle(calendarDay)
      Writes the month name in the monthly table

   writeDayNames()
      Writes the weekday title rows in the calendar table

   daysInMonth(calendarDay)
      Returns the number of days in the month from calendarDay

   writeMonthDays(calendarDay, currentTime)
      Writes the daily rows in the monthly table, highlighting
      the date specified in the currentTime parameter.

   writeDay(weekDay, dayCount, calendarDay, currentTime)
      Write the opening and close table row tags and the table
      cell tag for an individual day in the calendar.

*/



function writeMonth(calendarDay, currentTime) {
   document.write("<table class='monthly_table'>");
   writeMonthTitle(calendarDay);
   writeDayNames()
   writeMonthDays(calendarDay, currentTime);
   document.write("</table>");
}

function writeMonthTitle(calendarDay) {
   var monthName = new Array("January", "February", "March", "April", "May",
   "June", "July", "August", "September", "October", "November", "December");

   var thisMonth=calendarDay.getMonth();

   document.write("<tr>");
   document.write("<th class='monthly_title' colspan='7'>");
   document.write(monthName[thisMonth]);
   document.write("</th>");
   document.write("</tr>");
}

function writeDayNames() {
   var dayName = new Array("S","M","T","W","R","F","S");  
   document.write("<tr>");
   for (var i=0;i<dayName.length;i++) {
      document.write("<th class='monthly_weekdays'>"+dayName[i]+"</th>");
   }
   document.write("</tr>");
}

function daysInMonth(calendarDay) {
   var thisYear = calendarDay.getFullYear();
   var thisMonth = calendarDay.getMonth();
   var dayCount = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
   if ((thisYear % 4 == 0)&&((thisYear % 100 !=0) || (thisYear % 400 == 0))) {
         dayCount[1] = 29;
   }
   return dayCount[thisMonth];
}

function writeMonthDays(calendarDay, currentTime) {

   var weekDay = calendarDay.getDay();

   document.write("<tr>");
   for (var i=0; i < weekDay; i++) {
      document.write("<td></td>");
   }

   var totalDays = daysInMonth(calendarDay);
   for (var dayCount=1; dayCount<=totalDays; dayCount++) {

      calendarDay.setDate(dayCount);
      weekDay = calendarDay.getDay();
      writeDay(weekDay, dayCount, calendarDay, currentTime);
   }
   
   document.write("</tr>");
}

function writeDay(weekDay, dayCount, calendarDay, currentTime) {
   if (weekDay == 0) document.write("<tr>");
   if (calendarDay.getTime() == currentTime) {
      document.write("<td class='monthly_dates' id='today'>"+dayCount+"</td>");
   } else {
      document.write("<td class='monthly_dates'>"+dayCount+"</td>");
   }
   if (weekDay == 6) document.write("</tr>");
}
function writeMonthCell(calendarDay, currentTime) {
      
      var dayCount = 1;
      var totaldays = daysInMonth(calendarDay);
      calendarDay.setDate(1); // sets day one
      var weekDay = calendarDay.getDay();
      
      // cells for each days of the month
/*      
      var currentDay=new Date().getDate();
      if(dayCount === currentDay){
            //highlight
            document.write("<td class='calendar_dates' id='calendar_today' style='background-color:red'>"+dayCount+"</td>");
      }else{
            // display the day
            document.write("<td class='calendar_dates'>"+dayCount+"</td>");
      }
*/
      document.write("<td class='yearly_months'>");
      writeMonth(calendarDay, currentTime)
      document.write("</td>");
}

function yearly(calDate){
       if (calDate == null){
             var calendarDay = new Date();
       }else{
             var calendarDay = new Date();
             
            var currentTime = calendarDay.getTime();      
       // pull 4 digit year
      var thisYear = calendarDay.getFullYear();

          document.write("<table id='yearly_table'><tr><th id='yearly_table' colspan='4'>"+thisYear+"</th></tr>");
           
      var monthNum = -1;
     
      //named i that goes from 1-3 in increments of 1
      for(var i=0; i<3; i++){
            document.write("<tr>");
           
            // named j that goes from 1-4 in increments of 1
            for(var j=0; j<4; j++){
                 
                  // increase by one
                  monthNum++;
                 
                  // use setDate() date object method to change the day value of calendarDay to 1 (first of month)
                  calendarDay.setDate(1);
                 
                  // use the setMonth() date object method to change the month value of calendarDay to monthNum
                  calendarDay.setMonth(monthNum);
                 
                  // call function
                  writeMonthCell(calendarDay, currentTime);

            }
            // write closing </tr> after nested loop
            document.write("<tr>");
      }
            document.write("</table>");
}
}

With what you said above, I need to define caldate? And what is the code you posted above? I pasted that in my doc and still nothing.

Thanks for your help guys,
New at JS

Ryan

the code above is the same year.js file, but with appropriate changes for it to work.

In your html code replace
<script type="text/javascript">
   yearly(calDate);
   </script>

with
<script type="text/javascript">
var today = new Date();
   yearly(today);
   </script>

Alrighty, ill give that a go and ill let you know how it goes?

I got it!

I put 207 in that function and it worked fine!

Thank you for your help and suggestions.

Ryan

Did you see my suggested changes on my previous post. It makes your calendar more flexible. If you do not need further assistance, please credit and close the problem.

I must have skipped right over that, ill take a look and play with that code you gave me, thank you for that!

Thanks for all of your help,

Ryan

That was not fair. I debugged your function. Amongst other things, your for loops looked as follows:


    for(var i=1; i<3; i++){
            document.write("<tr>");
           
            // named j that goes from 1-4 in increments of 1
            for(var j=1; j=1<4; j++){

going into infinite loop even if you passed 2007. I corrected it to what it look like now.

    for(var i=0; i<3; i++){
            document.write("<tr>");
           
            // named j that goes from 1-4 in increments of 1
            for(var j=0; j<4; j++){

Let me re open question, I messed up on points.

Ryan

Re-opened by Asker request.


Vee_Mod
Experts Exchange Moderator

catonthecouchproductions:
Thank you for being fair. I couldn't help looking at your current version of yealy.js and noticed that you did not update the yearly function as shown five comments before this one. If you leave it as is:
yearly(): will not print anything
yearly(2006): will print the current year's calendar
yearly(2008): will print the current year's calendar
with my changes, yearly() and yearly(2007) will print 2007 calendar. yearly(2008) will print next years calendar etc. It's more flexible.

Thank you man, I will go play with these. It was a mistake, I didnt mean to give all points to one person.

Thank you all for your help! If you want to get some more I have another one :) You were a great help.


https://www.experts-exchange.com/questions/22908763/script-aculo-horizontal-scrolling-smooth-scroll-to-an-anchor.html
Ryan