HTML组件(HTMLCOMPONENTS)之七CALENDARHTC

王朝html/css/js·作者佚名  2008-05-20
窄屏简体版  字體: |||超大  

===CALENDAR HTC===

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航