HTML Components: Programming the Calendar - II | WebReference

HTML Components: Programming the Calendar - II


HTML Components

Programming the Calendar - II

The drawCal() function does the actual drawing. It accepts the following parameters:

The first section of the function initializes several variables for later formatting control:

  // constant table settings
  var border = 2; // 3D height of table's border
  var cellspacing = 4; // width of table's border
  var headerColor = "midnightblue"; // color of table's header
  var headerSize = "+3"; // size of tables header font
  var colWidth = 60; // width of columns in table
  var dayCellHeight = 25; // height of cells containing days of
   the week
  // (The two lines above should be joined as one line.
  // They have been split for formatting purposes.)
  var dayColor = "darkblue"; // color of font representing week days
  var cellHeight = 40; // height of cells representing dates
   in the calendar
  // (The two lines above should be joined as one line.
  // They have been split for formatting purposes.)
  var todayColor = "red"; // color specifying today's date in
   the calendar
  // (The two lines above should be joined as one line.
  // They have been split for formatting purposes.)
  var timeColor = "purple"; // color of font representing current time

We now initialize the text variable and create a header cell in our table with the current month and year:

  // create basic table structure
  var text = ""; // initialize accumulative variable to empty string
  text += '<TABLE BORDER=' + border + ' CELLSPACING=' +
    cellspacing + '>'; // table settings
  text += '<TH COLSPAN=7 HEIGHT=' + 10 + '>';
    // create table header cell
  text += '<FONT COLOR="' + headerColor + '" SIZE=' +
    headerSize + '>';// set font for table header
  text += monthName + ' ' + year;
  text += '</FONT>'; // close table header's font settings
  text += '</TH>'; // close header cell

We keep the table cell's opening tag specification in openCol and its closing tag specification in CloseCol:

  // variables to hold constant settings
  var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' +
    dayCellHeight + '>';
  // (The two lines above should be joined as one line.
  // They have been split for formatting purposes.)
  openCol += '<FONT COLOR="' + dayColor + '">';
  var closeCol = '</FONT><TD>';

The abbreviated day names are stored in weekDay[] array:

  // create array of abbreviated day names
  var weekDay = new Array(7);
  weekDay[0] = "Sun";
  weekDay[1] = "Mon";
  weekDay[2] = "Tues";
  weekDay[3] = "Wed";
  weekDay[4] = "Thu";
  weekDay[5] = "Fri";
  weekDay[6] = "Sat";

We then iterate over the seven days of the week and print them to the next row of the calendar:


  // create first row of table to set column width and
  // specify week day
  text += '<TR ALIGN="center" VALIGN="center">';
  for (var dayNum = 0; dayNum < 7; ++dayNum) {
    text += openCol + weekDay[dayNum] + closeCol ;
  }
  text += '</TR>';

We print the days of the month by a double loop. The outer loop iterates over the rows of the calendar. We start from row no. 1 and we go up to Math.ceil((lastDate + firstDay - 1) / 7). Take a moment to convince yourself that the math is ok. For example, if today is Thursday, firstDay is 5. Suppose this is the month of June, so lastDate is 30. The number of rows will (5 + 30 -1)/7 which is 34/7 which is between 4 and 5. The Math.ceil() function rounds it to 5 in this case. The inner loop iterates over the seven days of the week. Here is the double loop section:


  // declaration and initialization of two variables to help
  // with tables
  var dayOfMonth = 1;
  var curCell = 1;
  for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7);
    ++row) {
  // (The two lines above should be joined as one line.
  // They have been split for formatting purposes.)
    text += '<TR ALIGN="right" VALIGN="top">';
    for (var col = 1; col

We are now into some decisions. First, some cells do not belong to the month at all. These are the cells before the first day of the month and after the last day of the month. We just skip these cells:

if ((curCell  lastDate)) {
  text += '<TD></TD>';
  curCell++;
} else {

These cells will be formatted according to the defaults and assignments relevant to the TABLE tag. We did set the style of the TD tag:

<STYLE>
  TD {
      background-color:tan;
      width:50;
      height:50;
     }
</STYLE>

Observe that the cells that do not belong to the month (either before the first day or after the last day) are colored tan.

A second decision to make is whether we are about to print the current date's cell. In this case, we call the custom tag DAY of the HTML Component TODAY, passing it the day of the month as its value property:

if (dayOfMonth == date) { // current cell represents today's date
  text += '<TD><TODAY:DAY value=' + dayOfMonth + '></TODAY:DAY></TD>';
} else {

The third and last option is to print all other days of the month. We call the custom tag DAY of the HTML Component ANYDAY, passing it the day of the month as its value property, as above:

text += '<TD><ANYDAY:DAY value=' + dayOfMonth + '></ANYDAY:DAY></TD>';

Finally, we need to close the loops. At the end of each day iteration we increment dayOfTheMonth. At the end of each row, we need to add a TR tag. At the end of the double loop we end the table and write out the text variable:

				  }
			   dayOfMonth++;
			  }
		}
		text += '</TR>';
	}
	// close all basic table tags
	text += '</TABLE>';
	text += '</CENTER>';
	// print accumulative HTML string
	document.write(text);
}

Next: How to write the day's HTCs

https://www.internet.com

Produced by Yehuda Shiran and Tomer Shiran

Created: July 3, 2000
Revised: July 3, 2000

URL: https://www.webreference.com/js/column64/7.html