The Chamberlain Civic Center

This is the Tutorial 3 Review.  The project is to show a yearly calender.  I’m going to format this post a little different than the others.  I’m going to provide a comment comment block followed by the code. Alright, let’s get started.

We’re going to start off by making a Javascript file called yearly.js.  As always, this will be where we call our functions.  All eight of them.  Yep, eight.  It’s a lot and some of them are a bit confusing, but as always, I’ll do my best to explain.  Alright, let’s get started.

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

function yearly(calDate) {
   if (calDate == null) calendarDay=new Date();
   else calendarDay = new Date(calDate);

   var currentTime = calendarDay.getTime();
   var thisYear = calendarDay.getFullYear();
   document.write(“<table id=’yearly_table’>”);
   document.write(“<tr><th id=’yearly_title’ colspan=’4‘>”+thisYear+”</th></tr>”);
  
   var monthNum = -1;
   for (var i=1; i<=3; i++) {
      document.write(“<tr>”);
      for (var j=1; j<=4; j++) {
         monthNum++;
         calendarDay.setDate(1);
         calendarDay.setMonth(monthNum);
         writeMonthCell(calendarDay, currentTime);
      }
      document.write(“</tr>”);
   }
   document.write(“</table>”);  
}

   writeMonthCell(calendarDay, currentTime)
      Writes the yearly table cell containing a monthly
      calendar.
  
   function writeMonthCell(calendarDay, currentTime) {
   document.write(“<td class=’yearly_months’>”);
   writeMonth(calendarDay, currentTime);
   document.write(“</td>”);
}

   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.
  
   function writeMonth(calendarDay, currentTime) {
   document.write(“<table class=’monthly_table’>”);
   writeMonthTitle(calendarDay);
   writeDayNames()
   writeMonthDays(calendarDay, currentTime);
   document.write(“</table>”);
}

   writeMonthTitle(calendarDay)
      Writes the month name in the monthly 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>”);
}

   writeDayNames()
      Writes the weekday title rows in the calendar table
  
   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>”);
}

   daysInMonth(calendarDay)
      Returns the number of days in the month from calendarDay
  
   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];
}

   writeMonthDays(calendarDay, currentTime)
      Writes the daily rows in the monthly table, highlighting
      the date specified in the currentTime parameter.
  
   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>”);
}

   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 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>”);
}

As for calender.html, I will just post the code as it should be so all you will have to do is copy and paste it into your file.  I apologize for not formatting it with the colors as I did the Javascript, but here’s what you should need.

<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 src=”yearly.js” type=”text/javascript”></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();
   </script>
</div>

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

</body>
</html>

~ by Jeff on March 22, 2008.