HTML组件(HTML COMPONENTS)之六

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

 
head
titleCalendar Exampletitle
IMPORT NAMESPACE=MYCAL IMPLEMENTATION=calendar.htc
HEAD

BODY
PClick a day in the calendar to add or modify your schedule.P

MYCALCALENDARMYCALCALENDAR

BODY
HTML

　===CALENDAR HTC===

 
HEAD
IMPORT NAMESPACE=ANYDAY IMPLEMENTATION=day.htc
IMPORT NAMESPACE=TODAY IMPLEMENTATION=today.htc

PUBLICCOMPONENT tagName=CALENDAR
ATTACH EVENT=oncontentready ONEVENT=fnInit()
PUBLICCOMPONENT

SCRIPT LANGUAGE=javascript
!--
function fnInit() {
defaults.viewLink = document;
}
 --
SCRIPT

STYLE
TD {
background-colortan;
width50;
height50;
}
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
filevar 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 = 'FONTTD';

 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 += 'TDTD';
curCell++
} else {
if (dayOfMonth == date) {  current cell represents today's date
text += 'TDTODAYDAY value=' + dayOfMonth + 'TODAYDAYTD';
} else {
text += 'TDANYDAYDAY value=' + dayOfMonth + 'ANYDAYDAYTD';
}
dayOfMonth++;
}
}
text += 'TR';
}

 close all basic table tags
text += 'TABLE';
text += 'CENTER';

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

 --
SCRIPT
BODY
HTML 
 
 
  作者：feiy 

Copyright ＠ 2007-2012 敏韬网(敏而好学，文韬武略--MinTao.Net)（学习笔记） Inc All Rights Reserved.
闵涛 E_mail:admin@mintao.net(欢迎提供学习资源)

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18