Create an Object-Oriented JavaScript Calendar Using the Fa-3 : Page 3

Create the Calendar Constructor
Next, open a new file in your text editor and type in the constructor for the calendar object as follows:

   // Constructor
   function calendar(id, d, p){
      this.id = id;
      this.dateObject = d;
      this.pix = p;
      this.write = writeCalendar;
      this.length = getLength();
      this.month = d.getMonth();
      this.date = d.getDate();
      this.day = d.getDay();
      this.year = d.getFullYear();
      this.getFormattedDate = getFormattedDate;
      // get the first day of the month's day
      d.setDate(1);
      this.firstDay = d.getDay();
      // then reset the date object to the correct date
      d.setDate(this.date);
   }

The constructor takes three parameters: an id value (so that it's possible to place multiple calendars on a single page), a JavaScript Date object (so a calendar can begin at any arbitrary date), and an array of JavaScript Image objects (which you can manipulate programmatically if need be).

In addition to assigning the three parameters to the appropriate properties, the code adds additional properties and methods to the calendar object that make it functional. All the properties expose values from the wrapped Date object, while the methods provide mechanisms that enable the calendar to display its information. Hiding the Date object within the calendar object is what the Façade design pattern is all about.

Write the Methods
The calendar contains three useful methods: writeCalendar(), getLength(), and getFormattedDate(). To implement getFormattedDate() the code uses two "convenience" arrays that hold the months of the year and the days of the week. Add the following code to your script file:

   var days = new Array('Sunday','Monday','Tuesday',
      'Wednesday','Thursday','Friday','Saturday');
   var months = new Array('January',
      'February','March','April',
      'May','June','July','August','September',
      'October','November','December');
   
   function getFormattedDate(){
      return days[this.day] + ', ' + months[this.month] +
         ' ' + this.date + ', ' + this.year;
      // return this.month + '/' + this.date + '/' + 
         this.year;
   }

If you'd prefer not to use the convenience arrays, you can get a formatted date from the calendar object itself. I've commented out the line in the getFormattedDate() method that does just that. Don't delete the convenience arrays though, you'll need them later.

You know the old adage: "Thirty days hath September, April, June and November...." Calculating the length isn't quite that simple, but it's close.

You need to know the number of days in any particular month. The getLength() method calculates that value, so the calendar's length property represents the number of days in the currently displayed month. You know the old adage: "Thirty days hath September, April, June, and November...." Calculating the length isn't quite that simple, but it's close. Add the following getLength() method to your script:

   function getLength(){
      // thirty days has September...
      switch(this.month){
         case 1:
            if ((this.dateObject.getFullYear()%4==0 && 
              this.dateObject.getFullYear()%100!=0) || 
              this.dateObject.getFullYear()%400==0)
               return 29; // leap year
            else
               return 28;
         case 3:
            return 30;
         case 5:
            return 30;
         case 8:
            return 30;
         case 10:
            return 30
         default:
            return 31;
      }
   }

The getLength() method correctly determines whether the currently displayed year is a leap year, and adjusts the return value accordingly.

Although the writeCalendar() method looks daunting, remember that you only have to write it once!

The writeCalendar() method is the guts of the calendar object application. It's responsible for writing the HTML that displays the calendar on the Web page. Essentially, it generates a very long string built from the properties of the calendar object. Although it looks daunting, remember that you only have to write it once! Here's the writeCalendar() method:

   function writeCalendar(){
      var calString = '<div id="calContainer">';
      // write month and year at top of table
      calString += '<table id="cal' + this.id + 
         '" cellspacing="0" width="200"' + 
         ' style="border:1px black solid;">';
      // write the image -- comment out to hide images
      calString += '<tr><th colspan="7"><img src="' + 
         this.pix[this.month].src + '"/></th></tr>';
      // write the month
      calString += '<tr><th colspan="7" class="month">' + 
         months[this.month] + ', ' + this.year + 
         '</th></tr>';
      // write a row containing days of the week
      calString += '<tr>';
      
      for(i=0;i<days.length;i++){
         calString += '<th class="dayHeader">' + 
            days[i].substring(0,3) + '</th>';
      }
      
      // write the body of the calendar
      calString += '<tr>';
      // create 6 rows so the calendar doesn't resize
      for(j=0;j<42;j++){
         var displayNum = (j-this.firstDay+1);
         if(j<this.firstDay){
            // write the leading empty cells
            calString += '<td class="empty">&nbsp;</td>';
         }else if(displayNum==this.date){
            calString += '<td id="' + this.id + 
              'selected" class="date" ' + 
              'onClick="javascript:changeDate(this,\'' + 
              this.id + '\')">' + displayNum + '</td>';
         }else if(displayNum > this.length()){
            // Empty cells at bottom of calendar
            calString += '<td>&nbsp;</td>';
         }else{
            // the rest of the numbered cells
            calString += '<td id="" class="days" ' + 
              'onClick="javascript:changeDate(this,\'' + 
              this.id + '\')">' + displayNum + '</td>';
         }
         if(j%7==6){
            calString += '</tr><tr>';
         }
      }
      // close the last number row
      calString += '</tr>';
      // write the nav row
      calString += '<tr>';
      calString += '<td class="nav" ' + 
         'style="text-decoration:underline;"' +  
         ' onClick="changeMonth(-12,\'' + this.id + 
         '\')">&lt;</td>';
      calString += '<td class="nav" ' + 
         'onClick="changeMonth(-1,\'' + this.id + 
         '\')">&lt;</td>';
      calString += '<td class="month" ' +  
         'colspan="3">&nbsp;</td>';
      calString += '<td class="nav"' +  
         ' onClick="changeMonth(1,\'' + this.id + 
         '\')">&gt;</td>';
      calString += '<td class="nav" ' + 
         'style="text-decoration:underline;text-' +
         'align:right;" onClick="changeMonth(12,\'' + 
         this.id + '\')">&gt;</td>';
      calString += '</tr>';
      
      calString += '</table>';
      calString += '</div>';
      return calString;
   } 

There's a lot going on in this method. The first few lines write out containers and then the image to display as well as the Month, Year banner. You can comment out the line that writes the image if you'd like to create a traditional date picker. The code loops through the days array and picks off the first three letters of each day name to display the days of the week. Next, the method writes out the body of the calendar using the calendar object's firstDay property to determine how many leading empty cells are required. Next, it creates table cells that represent each day of the month, applying the appropriate CSS style for the current day. Finally, it creates the navigation bar at the bottom of the calendar.

Previous Page

Next Page

Other Articles by this Author