HTML组件(HTML COMPONENTS)之六

<head>
<title>Calendar Example</title>
<?IMPORT NAMESPACE="MYCAL" IMPLEMENTATION="calendar.htc"/>
</HEAD>

<BODY>
<P>Click a day in the calendar to add or modify your schedule.</P>

<MYCAL:CALENDAR></MYCAL:CALENDAR>

<PUBLIC:COMPONENT tagName="CALENDAR">
<ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/>
</PUBLIC:COMPONENT>

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

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

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>