HTML Components

Listings of Calendar's HTC

<HTML XMLNS:MYCAL XMLNS:TODAY XMLNS:ANYDAY>
<HEAD>
  <?IMPORT NAMESPACE="ANYDAY" IMPLEMENTATION="day.htc"/>
  <?IMPORT NAMESPACE="TODAY" IMPLEMENTATION="today.htc"/>
  
<PUBLIC:COMPONENT tagName="CALENDAR">
  <ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/>
</PUBLIC:COMPONENT>

<SCRIPT LANGUAGE="JavaScript">
<!--
function fnInit() {
  defaults.viewLink = document;
}
// -->
</SCRIPT>

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

<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--

// Copyright 1997 -- Tomer Shiran

setCal();

function leapYear(year) {
  if (year % 4 == 0) {// basic rule
    return true; // is leap year
  }
  /* else */ // else not needed when statement is "return"
  return false; // is not leap year
}

function getDays(month, year) {
  // create array to hold number of days in each month
  var ar = new Array(12);
  ar[0] = 31; // January
  ar[1] = (leapYear(year)) ? 29 : 28; // February
  ar[2] = 31; // March
  ar[3] = 30; // April
  ar[4] = 31; // May
  ar[5] = 30; // June
  ar[6] = 31; // July
  ar[7] = 31; // August
  ar[8] = 30; // September
  ar[9] = 31; // October
  ar[10] = 30; // November
  ar[11] = 31; // December

  // return number of days in the specified month (parameter)
  return ar[month];
}

function getMonthName(month) {
  // create array to hold name of each month
  var ar = new Array(12);
  ar[0] = "January";
  ar[1] = "February";
  ar[2] = "March";
  ar[3] = "April";
  ar[4] = "May";
  ar[5] = "June";
  ar[6] = "July";
  ar[7] = "August";
  ar[8] = "September";
  ar[9] = "October";
  ar[10] = "November";
  ar[11] = "December";

  // return name of specified month (parameter)
  return ar[month];
}

function setCal() {
  // standard time attributes
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth();
  var monthName = getMonthName(month);
  var date = now.getDate();
  now = null;

  // create instance of first day of month, and extract the day on which it occurs
  var firstDayInstance = new Date(year, month, 1);
  var firstDay = firstDayInstance.getDay();
  firstDayInstance = null;

  // number of days in current month
  var days = getDays(month, year);

  // call function to draw calendar
  drawCal(firstDay + 1, days, date, monthName, year);
}

function drawCal(firstDay, lastDate, date, monthName, year) {
  // constant table settings
  //var headerHeight = 50 // height of the table's header cell
  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
  var dayColor = "darkblue"; // color of font representing week days
  var cellHeight = 40; // height of cells representing dates in the calendar
  var todayColor = "red"; // color specifying today's date in the calendar
  var timeColor = "purple"; // color of font representing current time

  // 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

  // variables to hold constant settings
  var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>';
  openCol += '<FONT COLOR="' + dayColor + '">';
  var closeCol = '</FONT></TD>';

  // 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";
	
  // 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>';
	
  // 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) {
    text += '<TR ALIGN="right" VALIGN="top">';
    for (var col = 1; col <= 7; ++col) {
      if ((curCell < firstDay) || (dayOfMonth > lastDate)) {
        text += '<TD></TD>';
        curCell++
      } else {
          if (dayOfMonth == date) { // current cell represents today's date
            text += '<TD><TODAY:DAY value=' + dayOfMonth + '></TODAY:DAY></TD>';
          } else {
              text += '<TD><ANYDAY:DAY value=' + dayOfMonth + '></ANYDAY:DAY></TD>';
            }
            dayOfMonth++;
        }
    }
    text += '</TR>';
  }
	
  // close all basic table tags
  text += '</TABLE>';
  text += '</CENTER>';

  // print accumulative HTML string
  document.write(text); 
}

// -->
</SCRIPT>

</BODY>
</HTML>