Displaying the Pop-up Calendar

When I wrote "display" above, I meant creating the table and filling it with the calendar data. Using the parent window to pop up the calendar will be discussed in the section titled "Inter-Window Communications."

Calendar display should be familiar to you by now, so I will simply give you the source for the calendar and explain the very few different features of a pop-up calendar. The file name of this example is Simple_Popup_Calendar.html:

<html> 
 <head> 
  <title>Date Chooser</title> 

 <style type="text/css">
 <!-
      .mono{ font-family: monospace; }
  --> 
  </style> 

  <script language="JavaScript">
  <!-
      var now = new Date();
      var month = new Date( fixYear( now.getYear() ), now.getMonth(), 1 );
      var months = new Array( "January", "February", "March", "April",
                              "May", "June", "July", "August", "September",
                              "October", "November", "December" ); 
      function fixYear( year )
      { 
        return( year < 1000 ? year + 1900 : year );
      } 

      function fixMonth( month )
     {
       return( month < 0 ? month + 12 : (month > 11 ? month 12 : month) );
     } 
     function getNumberDays( d )
 
 {
    switch( d.getMonth() + 1 )
    {
       case 1: case 3: case 5: case 7:
       case 8: case 10: case 12:
          return( 31 );
       case 4: case 6: case 9: case 11:
          return( 30 );
       case 2:
          return( 28 + ( d.getYear % 4 == 0 ? 1 : 0 ) );
    }
  }

  function getEnding( number )
  {
    if( number > 10 && number < 20 ) return( "th" ); 

    switch( number % 10 )
    {
       case 0: case 4: case 5:
       case 6: case 7: case 8:
       case 9:
         return( "th" );
       case 1: return( "st" );
       case 2:
         return( "nd" );
       case 3:
         return( "rd" ); 
    } 
 
  } 
  function onSelect()
  {
  } 
  // --> 
 </script> 

 </head> 

 <body> 

  <form name="theForm">  
     <table border="1" width="75%" style="border-collapse: collapse"> 
      <tr> 
        <td align="left" colspan=2> 
           &nbsp;
        </td> <td colspan=3> 
           <center> 
            <b><script language="JavaScript">
            <!-
               document.write( months[fixMonth( month.getMonth() )] + " " + 
                             fixYear( month.getYear() ) );
              // --> 
             </script></b></center>
       </td>
       <td align="right" colspan=2> 
           &nbsp;</td>
       </tr>
    <tr> 
        <td width="14%"><b><i>Sun</i></b></td>
        <td width="14%"><b><i>Mon</i></b></td>
        <td width="14%"><b><i>Tue</i></b></td>
        <td width="14%"><b><i>Wed</i></b></td>
        <td width="14%"><b><i>Thu</i></b></td>
        <td width="14%"><b><i>Fri</i></b></td>
        <td width="14%"><b><i>Sat</i></b></td>
    </tr>
    <tr> 
        <script language="JavaScript">
        <!--
             var startDay = month.getDay();
             for( i = 0 ; i < startDay ; i++ )
             {
               document.write( "<td></td>" );
             } 

             var numDays = getNumberDays( month );
             for( i = 1 ; i < numDays + 1 ; i++ )
             {
               if( ( i + startDay ) % 7 == 1 )
             {
              document.write( "</tr><tr>" );   
             }
             document.write(  
                "<td><center>" + input type='button' " +
                "onClick='JavaScript: document.theForm.date.value=\"" +
                fixMonth( month.getMonth() + 1 ) + "/" + i + "/" +  
                fixYear( month.getYear() ) + "\"; onSelect();' " +
                "value='" + (i < 10 ? " " : "") + i + getEnding( i ) + "' " +
                 "class='mono'>" + "</center></td>" );        } 
      // --> 
      </script>
     </tr>
    </table>
  <input type="hidden" name="date">
 </form>
</body> 
</html>

In this example, the size of the calendar is an issue. Because the calendar is going to be displaying in a separate pop-up window, it will most likely be smaller than a parent window. Because of this, I created a cascading style sheet class named .mono that is applied to each button in the calendar to make them the same size. Buttons are used in the table cells this time around because they produce events that are easier to capture. The onSelect() function and the hidden form field will be explained later in this section.