?
Solved

Calender script using Javascript - no errors and no display

Posted on 2007-10-19
15
Medium Priority
?
1,310 Views
Last Modified: 2012-06-21
I am working on a calender script and so far I have no errors, but get no display. I have been working on this on and off for over a week now and I am still really stuck and am clueless on where to go now.

I was wondering if you guys knowing this stuff really well could help me with it.

Link: http://rksdesignstudios.com/files/cal/cal.htm
Link to JS: http://rksdesignstudios.com/files/cal/year.js

HTML:

<html>
<head>
<title>Yearly Calendar</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link href="yearly.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="year.js"></script>

</head>

<body>
<div id="head">
   <img style="float: right; border: 1px solid orange" src="ccc.jpg" alt="" />
   <img src="logo.gif" alt="Chamberlain Civic Center" />

</div>

<div id="links">
   <table><tr>
   <td><a href="#">Home</a></td><td><a href="#">Tickets</a></td>
   <td><a href="#">Events</a></td><td><a href="#">Directions</a></td>
   <td><a href="#">Hours</a></td><td><a href="#">Calendar</a></td>
   <td><a href="#">Tour</a></td><td><a href="#">Contact Us</a></td>
   </tr></table>
</div>

<div id="main">
   <h1>Yearly Calendar</h1>
   <script type="text/javascript">

   yearly(calDate);
   
   </script>
   
</div>

<address>
The Chamberlain Civic Center &nbsp;&#183;&nbsp;
2011 Lakefront Drive &nbsp;&#183;&nbsp;
Chamberlain, MO 43891 &nbsp;&#183;&nbsp;
(800) 555-8741
</adress>

</body>
</html>

Any idea why it is writing the calender?

Thanks,

Ryan
0
Comment
  • 6
  • 6
  • 2
  • +1
15 Comments
 
LVL 17

Expert Comment

by:jasonsbytes
ID: 20109357
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...
0
 
LVL 82

Expert Comment

by:hielo
ID: 20110112
/*

   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>");
}
}
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20110408
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
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 82

Expert Comment

by:hielo
ID: 20110832
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>
0
 
LVL 17

Accepted Solution

by:
jasonsbytes earned 1000 total points
ID: 20110852
I don't know if you need to define calDate or not, it is not defined, but it doesn't look like you are even using calDate in your 'yearly' function, so I don't know what the purpose of passing an undefined variable 'calDate' into yearly() is.  Do you mean to pass a year into the function?  Maybe try passing a literal year in and see what happens.  For example, call calDate like:  calDate('2006'); maybe.  
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20110872
Alrighty, ill give that a go and ill let you know how it goes?
0
 
LVL 82

Assisted Solution

by:hielo
hielo earned 1000 total points
ID: 20110975
If you replace the previous yearly function with this:

function yearly(calDate){
var calendarDay=null;
       if (calDate && Date.parse(calDate)){
             calendarDay = calDate;
       }else{
             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>");

}

You can call it two ways:
1. with no arguments it will print the calendar for the current year.
Ex:
yearly();

2. with a date object. it will print the calendar for the year set within the date object
Ex:
var x = new Date();//current system date
yearly(x);//will print a calendar for the current year

//change the year to 2006
x.setYear(2006);
yearly(x);//print calendar for 2006

//change the year yet again
x.setYear(1985);
yearly(x);//print the calendar for 1985
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20110990
I got it!

I put 207 in that function and it worked fine!

Thank you for your help and suggestions.

Ryan
0
 
LVL 82

Expert Comment

by:hielo
ID: 20114016
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.
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20115656
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
0
 
LVL 82

Expert Comment

by:hielo
ID: 20116002
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++){
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20116009
Let me re open question, I messed up on points.

Ryan
0
 
LVL 1

Expert Comment

by:Vee_Mod
ID: 20116246
Re-opened by Asker request.


Vee_Mod
Experts Exchange Moderator
0
 
LVL 82

Expert Comment

by:hielo
ID: 20116311
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.
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20122606
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.


http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_22908763.html
Ryan
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question