====日历主页面===
1<head>
2<title>Calendar Example</title>
3<?IMPORT NAMESPACE="MYCAL" IMPLEMENTATION="calendar.htc"/>
4</head>
1<body>
2<p>Click a day in the calendar to add or modify your schedule.</p>
3<mycal:calendar></mycal:calendar>
4</body>
===CALENDAR HTC===
1<head>
2<?IMPORT NAMESPACE="ANYDAY" IMPLEMENTATION="day.htc"/>
3<?IMPORT NAMESPACE="TODAY" IMPLEMENTATION="today.htc"/>
4<public:component tagname="CALENDAR">
5<attach event="oncontentready" onevent="fnInit()"></attach>
6</public:component>
7<script language="JavaScript">
8<!--
9function fnInit() {
10defaults.viewLink = document;
11}
12// -->
13</script>
14<style>
15TD {
16background-color:tan;
17width:50;
18height:50;
19}
20</style>
21</head>
1<body>
2<script language="JavaScript">
3<!--
4
5// Copyright 1997 -- Tomer Shiran
6
7setCal();
8
9function leapYear(year) {
10if (year % 4 == 0) {// basic rule
11return true; // is leap year
12}
13/* else */ // else not needed when statement is "return"
14return false; // is not leap year
15}
16
17function getDays(month, year) {
18// create array to hold number of days in each month
19var ar = new Array(12);
20ar[0] = 31; // January
21ar[1] = (leapYear(year)) ? 29 : 28; // February
22ar[2] = 31; // March
23ar[3] = 30; // April
24ar[4] = 31; // May
25ar[5] = 30; // June
26ar[6] = 31; // July
27ar[7] = 31; // August
28ar[8] = 30; // September
29ar[9] = 31; // October
30ar[10] = 30; // November
31ar[11] = 31; // December
32
33// return number of days in the specified month (parameter)
34return ar[month];
35}
36
37function getMonthName(month) {
38// create array to hold name of each month
39var ar = new Array(12);
40ar[0] = "January";
41ar[1] = "February";
42ar[2] = "March";
43ar[3] = "April";
44ar[4] = "May";
45ar[5] = "June";
46ar[6] = "July";
47ar[7] = "August";
48ar[8] = "September";
49ar[9] = "October";
50ar[10] = "November";
51ar[11] = "December";
52
53// return name of specified month (parameter)
54return ar[month];
55}
56
57function setCal() {
58// standard time attributes
59var now = new Date();
60var year = now.getFullYear();
61var month = now.getMonth();
62var monthName = getMonthName(month);
63var date = now.getDate();
64now = null;
65
66// create instance of first day of month, and extract the day on which it occurs
67var firstDayInstance = new Date(year, month, 1);
68var firstDay = firstDayInstance.getDay();
69firstDayInstance = null;
70
71// number of days in current month
72var days = getDays(month, year);
73
74// call function to draw calendar
75drawCal(firstDay + 1, days, date, monthName, year);
76}
77
78function drawCal(firstDay, lastDate, date, monthName, year) {
79// constant table settings
80//var headerHeight = 50 // height of the table's header cell
81var border = 2; // 3D height of table's border
82var cellspacing = 4; // width of table's border
83var headerColor = "midnightblue"; // color of table's header
84var headerSize = "+3"; // size of tables header font
85var colWidth = 60; // width of columns in table
86var dayCellHeight = 25; // height of cells containing days of the week
87var dayColor = "darkblue"; // color of font representing week days
88var cellHeight = 40; // height of cells representing dates in the calendar
89var todayColor = "red"; // color specifying today's date in the calendar
90var timeColor = "purple"; // color of font representing current time
91
92// create basic table structure
93var text = ""; // initialize accumulative variable to empty string
94text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>'; // table settings
95text += '<TH COLSPAN=7 HEIGHT=' + 10 + '>'; // create table header cell
96text += '<FONT COLOR="' + headerColor + '" SIZE=' + headerSize + '>'; // set font for table header
97text += monthName + ' ' + year;
98text += '</FONT>'; // close table header's font settings
99text += '</TH>'; // close header cell
100
101// variables to hold constant settings
102var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>';
103openCol += '<FONT COLOR="' + dayColor + '">';
104var closeCol = '</FONT></TD>';
105
106// create array of abbreviated day names
107var weekDay = new Array(7);
108weekDay[0] = "Sun";
109weekDay[1] = "Mon";
110weekDay[2] = "Tues";
111weekDay[3] = "Wed";
112weekDay[4] = "Thu";
113weekDay[5] = "Fri";
114weekDay[6] = "Sat";
115
116// create first row of table to set column width and specify week day
117text += '<TR ALIGN="center" VALIGN="center">';
118for (var dayNum = 0; dayNum < 7; ++dayNum) {
119text += openCol + weekDay[dayNum] + closeCol;
120}
121text += '</TR>';
122
123// declaration and initialization of two variables to help with tables
124var dayOfMonth = 1;
125var curCell = 1;
126
127for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
128text += '<TR ALIGN="right" VALIGN="top">';
129for (var col = 1; col <= 7; ++col) {
130if ((curCell < firstDay) || (dayOfMonth > lastDate)) {
131text += '<TD></TD>';
132curCell++
133} else {
134if (dayOfMonth == date) { // current cell represents today's date
135text += '<TD><TODAY:DAY value=' + dayOfMonth + '></TODAY:DAY></TD>';
136} else {
137text += '<TD><ANYDAY:DAY value=' + dayOfMonth + '></ANYDAY:DAY></TD>';
138}
139dayOfMonth++;
140}
141}
142text += '</TR>';
143}
144
145// close all basic table tags
146text += '</TABLE>';
147text += '</CENTER>';
148
149// print accumulative HTML string
150document.write(text);
151}
152
153// -->
154</script>
155</body>