html组件之:日历主页面----为中国网络技术提供点滴动力-iyit.net-易特网络技术！

　　通行证: 用户密码

域名空间　下载中心　 社区论坛　信息公告 my小屋

联系我们
设为首页
加入收藏

qq,asp,php,jsp,xml,sql,.net,编程程序网页图象建站经验私服




	当前位置：首页>>网页设计>>html/css>>正文	新版上线！[旧版]

注:打开慢时请稍等

html组件之:日历主页面

http://www.iyit.net 日期：2006-5-27 9:16:49 来源：转载点击：

【参加讨论】html组件之:日历主页面:

====日历主页面===

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

</body>
</html>

===calendar htc===

<public:component tagname="calendar">
<attach event="oncontentready" onevent="fninit()"/>
</public:component>

<body>
<script language="javascript">
<!--

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>

编辑：黑鹰　[发送给好友] [打印本页] [关闭窗口] [返回顶部]
上一篇：样式表全接触（3）
下一篇：html组件之:anyday 和 today htc(2)
转载请注明来源：www.iyit.net
特别声明： 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。

		相关文章