EVENT CALENDAR

The only difference between this ASP file & the HTML file:
  1. <SCRIPT></SCRIPT> tags are replaced with <% %> tags
  2. document.write()s are replaced with Response.write()s
  3. instead of using the location.search string to extract Month & Year information
    we use Request("Month") & Request("Year")

This example demonstrates how easy it is to transition from Client-Side JavaScript to Server-Side JavaScript.

<HTML>
<HEAD>
<TITLE>Calendar</TITLE>

<%

/********** DECLARE ARRAYS & DATE OBJECT **********/

var dayName = new Array ("Sunday", "Monday", "Tuesday", "Wednesday",
                                             "Thursday", "Friday", "Saturday");
var monthName = new Array ("January", "February", "March", "April", "May", "June", "July", 
                                                 "August", "September", "October", "November", "December");

var Month30 = new Array(3, 5, 8, 10); // months containing 30 days
var Month31 = new Array(0, 2, 4, 6, 7, 9, 11); // months containing 31 days

var now = new Date();

/********** END OF DECLARE ARRAYS & DATE OBJECT **********/

/********** CHECK QUERY STRING **********/

// if the Request("Month") doesn't exist then get current Month
// else get the Month from the QueryString
var Month = (isNaN(Request("Month"))) ? now.getMonth() : parseInt(Request("Month")) - 1;

// if the Request("Year") doesn't exist then get current Year
// else get the Year from the QueryString
var Year = (isNaN(Request("Year"))) ? now.getYear() : parseInt(Request("Year"));

/********** END OF CHECK QUERY STRING **********/

/********** GET FIRST DAY OF MONTH **********/

var strDate = new Date(Year, Month, 1);  // set Date for the 1st of the selected Month

var firstDay = strDate.getDay();  // get the Date of the 1st Day of the selected Month

function getDaysInMonth(Year, Month) {
     if (Month == 1) {
          // if February and Leap Year return 29 else 28
          if (((Year % 4 == 0) && (Year % 100 != 0)) || (Year % 400 == 0)) return 29;
          else return 28;
     }

      /*
      Description: Executes a statement for each element of an object or array.
      Syntax :

for (variable in [object | array])
    statement

     Checking to see if the Month has 30 days
     */
     for (month in Month30) {
          if (Month == Month30[month]) return 30;
     }

     // Checking to see if the Month has 31 days
     for (month in Month31) {
          if (Month == Month31[month]) return 31;
     }
}

var daysInMonth = getDaysInMonth(Year, Month);  // gives us the number of days in the Month

/********** END OF GET FIRST DAY OF MONTH **********/

%>

</HEAD>

<BODY>

<%

// variables to be used for the arrows
var monthL, monthR;
var yearL = yearR = Year;

Response.write('<H2>');

/********** LEFT ARROW **********/

// if Month <= 0 then we are going from Jan to Dec & the Year is one year less
if (Month <= 0) {
     monthL = 12;
     yearL = Year - 1;
}
else monthL = Month;

// create left linked arrow, ie, calendar.htm?Month=12&Year=1999
Response.write('<A HREF="calendar.htm?Month=' + monthL + '&Year=' + yearL + '">');
Response.write('<IMG SRC="images/left.gif" BORDER="0">');
Response.write('</A>');

/********** END OF LEFT ARROW **********/

/********** WRITE OUT MONTH & YEAR **********/

Response.write('&nbsp;&nbsp;'); // 2 spaces between Left Arrow & Month and Year
Response.write(monthName[Month] + " " + Year);  // write Month & Year
Response.write('&nbsp;&nbsp;'); // 2 spaces between Right Arrow & Month and Year

/********** END OF WRITE OUT MONTH & YEAR **********/

/********** RIGHT ARROW **********/

// if Month >= 0 then we are going from Dec to Jan & the Year is one year more
if (Month >= 11) {
     monthR = 1;
     yearR = Year + 1;
}
else monthR = Month + 2;

// create right linked arrow, ie, calendar.htm?Month=2&Year=2000
Response.write('<A HREF="calendar.htm?Month=' + monthR + '&Year=' + yearR + '">');
Response.write('<IMG SRC="images/right.gif" BORDER="0">');
Response.write('</A>');

/********** END OF RIGHT ARROW **********/

Response.write('<H2>');

%>

<TABLE>
    <TR>

<%

/********** TABLE HEADER **********/

// Create Table Headers (Sunday, Monday, etc..., Saturday)
for (i = 0; i < 7; i++) {
     Response.write('<TH>' + dayName[i] + '</TH>');
}

Response.write("</TR><TR>");

/********** END OF TABLE HEADER **********/

/********** BODY OF THE TABLE **********/

var column = firstDay; // first day of the Month
var Day = 1;

// fill up the Beginning of the Month of to the 1st of the Month with Blank Cells
for (i = 0; i < firstDay; i++) {
     Response.write('<TD>&nbsp;</TD>');  // &nbsp; creates an empty cell
}

for (i = 0; i < daysInMonth;) {
     // if column doesn't equal 7 then create the column
     // else begin a new row
     if (column++ != 7) {
          // if the column day happens to be today then make that column number blue to indicate today
          // else create a "normal" column
          if (now.getMonth() == Month && now.getDate() == Day && now.getYear() == Year)
               Response.write('<TD><FONT COLOR=BLUE>' + Day++ + "</FONT></TD>");
          else Response.write('<TD>' + Day++ + "</TD>");
          i++;
     }
     else {
          Response.write("</TR><TR>");
          column = 0;
     }
}

// fill up the End of the Month after the Last of the Month with Blank Cells
if (column != 0 && column < 7) {
     for (i = column; i < 7; i++) {
          Response.write('<TD>&nbsp;</TD>');  // &nbsp; creates an empty cell
     }
}

/********** END OF BODY OF THE TABLE **********/

%>

    </TR>
</TABLE>

</CENTER>

</BODY>
</HTML>