HTML组件之:日历主页面

网系我情

版主

Rank: 7 Rank: 7 Rank: 7

1^# 大中小发表于 2007-6-23 08:41 只看该作者

HTML组件之:日历主页面

====日历主页面===
' I) t1 ~; |% A; {. p
head
titleCalendar Example/title
?IMPORT NAMESPACE="MYCAL" IMPLEMENTATION="calendar.htc"/
/HEAD - R: A; O5 `: u( f4 [$ @
, r2 o" ?$ Q. w/ ~/ s0 K8 s
BODY
PClick a day in the calendar to add or modify your schedule./P 7 m% E  r, g5 @- G6 m$ c. x

MYCAL:CALENDAR/MYCAL:CALENDAR

/BODY
/HTML    H1 ]5 L5 e) W  k

===CALENDAR HTC===

HEAD 9 |- ]2 B; o  _
?IMPORT NAMESPACE="ANYDAY" IMPLEMENTATION="day.htc"/ 4 J/ q6 i# |! }8 t# {$ A' ?
?IMPORT NAMESPACE="TODAY" IMPLEMENTATION="today.htc"/
' D3 L& C8 y9 Z0 z# S$ w6 F
PUBLIC:COMPONENT tagName="CALENDAR"
ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/ 7 J7 R: F; m+ A7 F
/PUBLIC:COMPONENT " R8 G, Y$ e0 X$ ?
1 x% ?1 c' u- X/ Z0 A
SCRIPT LANGUAGE="JavaScript" ( Z5 D+ f% `5 m, g3 q
!--
function fnInit() { . ?5 u) I2 \& C9 n# J" X
defaults.viewLink = document; 2 P' L; R7 e+ F7 S
}
// --
/SCRIPT

STYLE
TD {
background-color:tan; 9 H" P2 C5 l, ]+ U8 G. \; Q
width:50;
height:50; 8 s: C4 ]+ z% M+ n$ H4 D
}
/STYLE
/HEAD

BODY
SCRIPT LANGUAGE="JavaScript"
!-- 9 V* P2 q$ @% m) |5 d4 ?2 Q
& l8 g" h6 T/ T  g4 H
// Copyright 1997 -- Tomer Shiran

setCal(); $ E/ Y  O; C2 A& A+ |! s7 v
) u, d0 v* A/ {; r  ~! `& N  q7 I
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) { , Z$ a' _4 g, ^3 M: U/ H
// create array to hold number of days in each month
var ar = new Array(12); 0 I" p+ p/ W3 {, A& F
ar[0] = 31; // January ; x- H% K6 b7 r" u
ar[1] = (leapYear(year)) ? 29 : 28; // February
ar[2] = 31; // March 6 m5 j7 F7 R* d* S9 h
ar[3] = 30; // April
ar[4] = 31; // May
ar[5] = 30; // June   ]% U. Q: E( E- S' H+ K5 }
ar[6] = 31; // July 2 P$ \4 [8 R- F4 k/ @
ar[7] = 31; // August
ar[8] = 30; // September # y4 f/ M, v" D* t) C
ar[9] = 31; // October
ar[10] = 30; // November
ar[11] = 31; // December 9 W( ?, Z% _. N& @) f4 h% Q, h) X
  t* T' K1 q5 I$ z; |
// return number of days in the specified month (parameter) 0 ^7 M' f6 E5 s
return ar[month]; + W$ {( b$ @5 `3 s
}

function getMonthName(month) { * h6 y: Y- t) g  Y8 ]9 Q, }* C
// create array to hold name of each month # X3 ^; W/ a* S  z, N- D
var ar = new Array(12);
ar[0] = "January";
ar[1] = "February";
ar[2] = "March"; - k+ G4 J* H- b, r
ar[3] = "April"; + q& J1 _* \' b, U9 o: v- g/ V" ~
ar[4] = "May"; : w, ^5 f. }' d' m; H9 S* r
ar[5] = "June";
ar[6] = "July"; 9 |% D3 D" D3 {7 Q1 ]( B% o0 Y& m' p
ar[7] = "August";
ar[8] = "September"; 5 M5 J) p' A3 G) K
ar[9] = "October";
ar[10] = "November";
ar[11] = "December";
2 A& l' S# r1 U( c' W' }
// return name of specified month (parameter) % C' F9 H8 u# Y9 Q! ?* s9 v9 `
return ar[month];
}
( y. K" l6 m- A0 h3 g& ?! C' D
function setCal() {
// standard time attributes
var now = new Date(); 2 O- o. s/ U$ s! Y& `
var year = now.getFullYear();
var month = now.getMonth(); 2 @4 e' l0 k2 A  _, F$ Q' |
var monthName = getMonthName(month); ( K, a" }% |4 E( Q
var date = now.getDate(); $ B  G  l: ^* d( R, [# s
now = null;

// create instance of first day of month, and extract the day on which it occurs , K7 j, g$ D( F  f1 O% z
var firstDayInstance = new Date(year, month, 1);
var firstDay = firstDayInstance.getDay();
firstDayInstance = null;
1 |& @. Q; h3 r7 G/ |- E+ R6 ~
// number of days in current month $ t" f9 R" z% F$ I
var days = getDays(month, year); / K) P) c3 {5 ]5 E) B

// call function to draw calendar
drawCal(firstDay 1, days, date, monthName, year);
}
0 C, v' v* u, b4 ]8 n4 B2 i
function drawCal(firstDay, lastDate, date, monthName, year) {   A' z8 B: i9 t
// constant table settings
//var headerHeight = 50 // height of the table's header cell
var border = 2; // 3D height of table's border 5 [+ U! E9 L1 P" U, E& v% K7 J
var cellspacing = 4; // width of table's border 0 J) R0 L1 d/ f6 h
var headerColor = "midnightblue"; // color of table's header + r/ L. K8 h7 _/ z' k1 w
var headerSize = " 3"; // size of tables header font
var colWidth = 60; // width of columns in table * c. X, h8 d# ^* W& o* K$ \+ `: z3 E
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 " D: y2 Z8 j2 h% j5 _2 O% p, y1 z
7 X$ [; b" Q# B. ~9 N& R, K6 Z
// create basic table structure   I- F& K0 N3 P) x4 u
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 . Q( x: p  f6 x2 M/ d" t* v
text  = monthName ' ' year;
text  = '/FONT'; // close table header's font settings 7 W: I- O8 f. d3 t, f( R
text  = '/TH'; // close header cell " X; ~) _- A9 e" p( a% F

// variables to hold constant settings 5 c# }- x. V$ S: M& S- B* `! c
var openCol = 'TD WIDTH=' colWidth ' HEIGHT=' dayCellHeight ''; 1 C2 \5 l. F2 m
openCol  = 'FONT COLOR="' dayColor '"'; 7 @  N" P* `# c' q4 Q+ J
var closeCol = '/FONT/TD';

// create array of abbreviated day names
var weekDay = new Array(7);
weekDay[0] = "Sun";
weekDay[1] = "Mon";
weekDay[2] = "Tues"; * S& J4 `% l9 C- r4 i1 Z
weekDay[3] = "Wed"; 8 H  ^4 o/ t# w9 ^; F! r
weekDay[4] = "Thu"; , C- A: ]3 W) _8 A; ^5 U
weekDay[5] = "Fri";
weekDay[6] = "Sat";
6 A6 [! V+ H+ Z8 k
// create first row of table to set column width and specify week day
text  = 'TR ALIGN="center" VALIGN="center"'; & Q; t( U; \  ^
for (var dayNum = 0; dayNum  7; dayNum) {
text  = openCol weekDay[dayNum] closeCol;
}
text  = '/TR'; . }7 z7 {6 m- A7 d' H  s6 e

// declaration and initialization of two variables to help with tables ) \: p- c3 J, T
var dayOfMonth = 1;
var curCell = 1;
/ C% S1 ?  O6 G+ J0 A- v3 g
for (var row = 1; row = Math.ceil((lastDate firstDay - 1) / 7); row) {   E7 ~  {0 [5 \; V7 F- W; y
text  = 'TR ALIGN="right" VALIGN="top"'; # A) e- H4 x4 v
for (var col = 1; col = 7; col) {
if ((curCell  firstDay) || (dayOfMonth  lastDate)) {
text  = 'TD/TD'; 7 h( W  G. E4 k
curCell
} else {
if (dayOfMonth == date) { // current cell represents today's date ) O. a8 s8 k- [, x. B" Y" p
text  = 'TDTODAY

AY value=' dayOfMonth '/TODAY

AY/TD'; 3 v& f+ ~. }- u+ N- N% G/ Q' y
} else {
text = 'TDANYDAY

AY value=' dayOfMonth '/ANYDAY:DAY/TD';
} 8 k3 l# P/ G) t* D: x
dayOfMonth  ;
}
}
text  = '/TR';
} ! Y7 `2 Q- E  j4 u) \
1 T' j, B! c. ?# M. l( p5 ^
// close all basic table tags " H1 @0 [9 v0 T
text  = '/TABLE';
text  = '/CENTER'; * S' ?. _8 t, T& {) W

// print accumulative HTML string
document.write(text); / _& ]1 o' C8 ?3 B
}

// --
/SCRIPT 0 M$ Z* z! T- _) L
/BODY # r) @" f% ^/ b; I2 ^
/HTML

点击图标进入精品网摘收藏欢迎大家加入网络收藏夹

TOP

‹‹ 上一主题 | 下一主题 ››