?? calendar.js
字號:
// BEGIN USER-EDITABLE SECTION -----------------------------------------------------
// CALENDAR COLORS
topBackground = "black"; // BG COLOR OF THE TOP FRAME
bottomBackground = "white"; // BG COLOR OF THE BOTTOM FRAME
tableBGColor = "black"; // BG COLOR OF THE BOTTOM FRAME'S TABLE
cellColor = "lightgrey"; // TABLE CELL BG COLOR OF THE DATE CELLS IN THE BOTTOM FRAME
headingCellColor = "white"; // TABLE CELL BG COLOR OF THE WEEKDAY ABBREVIATIONS
headingTextColor = "black"; // TEXT COLOR OF THE WEEKDAY ABBREVIATIONS
dateColor = "blue"; // TEXT COLOR OF THE LISTED DATES (1-28+)
focusColor = "#ff0000"; // TEXT COLOR OF THE SELECTED DATE (OR CURRENT DATE)
hoverColor = "darkred"; // TEXT COLOR OF A LINK WHEN YOU HOVER OVER IT
fontStyle = "12pt arial, helvetica"; // TEXT STYLE FOR DATES
headingFontStyle = "bold 12pt arial, helvetica"; // TEXT STYLE FOR WEEKDAY ABBREVIATIONS
// FORMATTING PREFERENCES
bottomBorder = false; // TRUE/FALSE (WHETHER TO DISPLAY BOTTOM CALENDAR BORDER)
tableBorder = 0; // SIZE OF CALENDAR TABLE BORDER (BOTTOM FRAME) 0=none
var DateTimeFormat = true; //"DateTime" if true, else a "Date"
// END USER-EDITABLE SECTION -------------------------------------------------------
// DETERMINE BROWSER BRAND
var isNav = false;
var isIE = false;
// ASSUME IT'S EITHER NETSCAPE OR MSIE
if (navigator.appName == "Netscape") {
isNav = true;
}
else {
isIE = true;
}
// global variable for top frame and bottom frame
var calDocTop;
var calDocBottom;
// PRE-BUILD PORTIONS OF THE CALENDAR WHEN THIS JS LIBRARY LOADS INTO THE BROWSER
buildCalParts();
// CALENDAR FUNCTIONS BEGIN HERE ---------------------------------------------------
// SET THE INITIAL VALUE OF THE GLOBAL DATE FIELD
function setDateField(formName, dateField) {
// ASSIGN THE INCOMING FIELD OBJECT TO A GLOBAL VARIABLE
thisform = document.forms[formName];
calDateField = thisform[dateField];
// GET THE VALUE OF THE INCOMING FIELD
inDate = thisform[dateField].value;
// SET calDate TO THE DATE IN THE INCOMING FIELD OR DEFAULT TO TODAY'S DATE
setInitialDate();
// THE CALENDAR FRAMESET DOCUMENTS ARE CREATED BY JAVASCRIPT FUNCTIONS
calDocTop = buildTopCalFrame();
calDocBottom = buildBottomCalFrame();
}
// SET THE INITIAL CALENDAR DATE TO TODAY OR TO THE EXISTING VALUE IN dateField
function setInitialDate() {
calDate = ParseDate(inDate, DateTimeFormat);
// IF THE INCOMING DATE IS INVALID, USE THE CURRENT DATE
if (isNaN(calDate)) {
// ADD CUSTOM DATE PARSING HERE
// IF IT FAILS, SIMPLY CREATE A NEW DATE OBJECT WHICH DEFAULTS TO THE CURRENT DATE
calDate = new Date();
}
// KEEP TRACK OF THE CURRENT DAY VALUE
calDay = calDate.getDate();
// SET DAY VALUE TO 1... TO AVOID JAVASCRIPT DATE CALCULATION ANOMALIES
// (IF THE MONTH CHANGES TO FEB AND THE DAY IS 30, THE MONTH WOULD CHANGE TO MARCH
// AND THE DAY WOULD CHANGE TO 2. SETTING THE DAY TO 1 WILL PREVENT THAT)
calDate.setDate(1);
}
// CREATE THE TOP CALENDAR FRAME
function buildTopCalFrame() {
// CREATE THE TOP FRAME OF THE CALENDAR
var calDoc =
"<HTML>" +
"<HEAD>" +
"</HEAD>" +
"<BODY BGCOLOR='" + topBackground + "'>" +
"<FORM NAME='calControl' onSubmit='return false;'>" +
"<CENTER>" +
"<TABLE CELLPADDING=0 CELLSPACING=1 BORDER=0 WIDTH=100%>" +
"<TR><TD COLSPAN=7>" +
"<CENTER>" +
getMonthSelect() +
"<INPUT NAME='year' VALUE='" + calDate.getFullYear() + "'TYPE=TEXT SIZE=4 MAXLENGTH=4 onChange='parent.opener.setYear()' onKeyDown='if (window.event != null && window.event.keyCode == 13) parent.opener.setYear()'>" +
"</CENTER>" +
"</TD>" +
"</TR>" +
"<TR>" +
"<TD COLSPAN=7>" +
"<CENTER>" +
"<INPUT " +
"TYPE=BUTTON NAME='previousYear' VALUE='<<' onClick='parent.opener.setPreviousYear()'><INPUT " +
"TYPE=BUTTON NAME='previousMonth' VALUE=' < ' onClick='parent.opener.setPreviousMonth()'><INPUT " +
"TYPE=BUTTON NAME='today' VALUE='" + L_Today + "' onClick='parent.opener.setToday()'><INPUT " +
"TYPE=BUTTON NAME='nextMonth' VALUE=' > ' onClick='parent.opener.setNextMonth()'><INPUT " +
"TYPE=BUTTON NAME='nextYear' VALUE='>>' onClick='parent.opener.setNextYear()'>" +
"</CENTER>" +
"</TD>" +
"</TR>" +
"</TABLE>" +
"</CENTER>" +
"</FORM>" +
"</BODY>" +
"</HTML>";
return calDoc;
}
// CREATE THE BOTTOM CALENDAR FRAME
// (THE MONTHLY CALENDAR)
function buildBottomCalFrame() {
// START CALENDAR DOCUMENT
var calDoc = calendarBegin;
// GET MONTH, AND YEAR FROM GLOBAL CALENDAR DATE
month = calDate.getMonth();
year = calDate.getFullYear();
// GET GLOBALLY-TRACKED DAY VALUE (PREVENTS JAVASCRIPT DATE ANOMALIES)
day = calDay;
var i = 0;
// DETERMINE THE NUMBER OF DAYS IN THE CURRENT MONTH
var days = getDaysInMonth();
// IF GLOBAL DAY VALUE IS > THAN DAYS IN MONTH, HIGHLIGHT LAST DAY IN MONTH
if (day > days) {
day = days;
}
// DETERMINE WHAT DAY OF THE WEEK THE CALENDAR STARTS ON
var firstOfMonth = new Date (year, month, 1);
// GET THE DAY OF THE WEEK THE FIRST DAY OF THE MONTH FALLS ON
var startingPos = firstOfMonth.getDay();
days += startingPos;
// KEEP TRACK OF THE COLUMNS, START A NEW ROW AFTER EVERY 7 COLUMNS
var columnCount = 0;
// MAKE BEGINNING NON-DATE CELLS BLANK
for (i = 0; i < startingPos; i++) {
calDoc += blankCell;
columnCount++;
}
// SET VALUES FOR DAYS OF THE MONTH
var currentDay = 0;
var dayType = "weekday";
// DATE CELLS CONTAIN A NUMBER
for (i = startingPos; i < days; i++) {
var paddingChar = " ";
// ADJUST SPACING SO THAT ALL LINKS HAVE RELATIVELY EQUAL WIDTHS
if (i-startingPos+1 < 10) {
padding = " ";
}
else {
padding = " ";
}
// GET THE DAY CURRENTLY BEING WRITTEN
currentDay = i-startingPos+1;
// SET THE TYPE OF DAY, THE focusDay GENERALLY APPEARS AS A DIFFERENT COLOR
if (currentDay == day) {
dayType = "focusDay";
}
else {
dayType = "weekDay";
}
// ADD THE DAY TO THE CALENDAR STRING
calDoc += "<TD align=center bgcolor='" + cellColor + "'>" +
"<a class='" + dayType + "' href='javascript:parent.opener.returnDate(" +
currentDay + ")'>" + padding + currentDay + paddingChar + "</a></TD>";
columnCount++;
// START A NEW ROW WHEN NECESSARY
if (columnCount % 7 == 0) {
calDoc += "</TR><TR>";
}
}
// MAKE REMAINING NON-DATE CELLS BLANK
for (i=days; i<42; i++) {
calDoc += blankCell;
columnCount++;
// START A NEW ROW WHEN NECESSARY
if (columnCount % 7 == 0) {
calDoc += "</TR>";
if (i<41) {
calDoc += "<TR>";
}
}
}
// FINISH THE NEW CALENDAR PAGE
calDoc += calendarEnd;
// RETURN THE COMPLETED CALENDAR PAGE
return calDoc;
}
// WRITE THE MONTHLY CALENDAR TO THE BOTTOM CALENDAR FRAME
function writeCalendar() {
// CREATE THE NEW CALENDAR FOR THE SELECTED MONTH & YEAR
calDocBottom = buildBottomCalFrame();
if (document.getElementById) { // ns6 & ie
top.newWin.frames['bottomCalFrame'].document.getElementById('bottomDiv').innerHTML = calDocBottom;
} else {
// WRITE THE NEW CALENDAR TO THE BOTTOM FRAME
top.newWin.frames['bottomCalFrame'].document.open();
top.newWin.frames['bottomCalFrame'].document.write(calDocBottom);
top.newWin.frames['bottomCalFrame'].document.close();
}
}
// SET THE CALENDAR TO TODAY'S DATE AND DISPLAY THE NEW CALENDAR
function setToday() {
// SET GLOBAL DATE TO TODAY'S DATE
calDate = new Date();
// SET DAY MONTH AND YEAR TO TODAY'S DATE
var month = calDate.getMonth();
var year = calDate.getFullYear();
// SET MONTH IN DROP-DOWN LIST
top.newWin.frames['topCalFrame'].document.calControl.month.selectedIndex = month;
// SET YEAR VALUE
top.newWin.frames['topCalFrame'].document.calControl.year.value = year;
// SET THE DAY VALUE
calDay = calDate.getDate();
// DISPLAY THE NEW CALENDAR
writeCalendar();
}
// SET THE GLOBAL DATE TO THE NEWLY ENTERED YEAR AND REDRAW THE CALENDAR
function setYear() {
// GET THE NEW YEAR VALUE
var year = top.newWin.frames['topCalFrame'].document.calControl.year.value;
// IF IT'S A FOUR-DIGIT YEAR THEN CHANGE THE CALENDAR
if (isFourDigitYear(year)) {
calDate.setFullYear(year);
writeCalendar();
top.newWin.frames['topCalFrame'].document.calControl.year.blur();
}
else {
// HIGHLIGHT THE YEAR IF THE YEAR IS NOT FOUR DIGITS IN LENGTH
top.newWin.frames['topCalFrame'].document.calControl.year.focus();
top.newWin.frames['topCalFrame'].document.calControl.year.select();
}
}
// SET THE GLOBAL DATE TO THE SELECTED MONTH AND REDRAW THE CALENDAR
function setCurrentMonth() {
// GET THE NEWLY SELECTED MONTH AND CHANGE THE CALENDAR ACCORDINGLY
var month = top.newWin.frames['topCalFrame'].document.calControl.month.selectedIndex;
calDate.setMonth(month);
writeCalendar();
}
// SET THE GLOBAL DATE TO THE PREVIOUS YEAR AND REDRAW THE CALENDAR
function setPreviousYear() {
var year = top.newWin.frames['topCalFrame'].document.calControl.year.value;
if (isFourDigitYear(year) && year > 1000) {
year--;
calDate.setFullYear(year);
top.newWin.frames['topCalFrame'].document.calControl.year.value = year;
writeCalendar();
}
}
// SET THE GLOBAL DATE TO THE PREVIOUS MONTH AND REDRAW THE CALENDAR
function setPreviousMonth() {
var year = top.newWin.frames['topCalFrame'].document.calControl.year.value;
if (isFourDigitYear(year)) {
var month = top.newWin.frames['topCalFrame'].document.calControl.month.selectedIndex;
// IF MONTH IS JANUARY, SET MONTH TO DECEMBER AND DECREMENT THE YEAR
if (month == 0) {
month = 11;
if (year > 1000) {
year--;
calDate.setFullYear(year);
top.newWin.frames['topCalFrame'].document.calControl.year.value = year;
}
}
else {
month--;
}
calDate.setMonth(month);
top.newWin.frames['topCalFrame'].document.calControl.month.selectedIndex = month;
writeCalendar();
}
}
// SET THE GLOBAL DATE TO THE NEXT MONTH AND REDRAW THE CALENDAR
function setNextMonth() {
var year = top.newWin.frames['topCalFrame'].document.calControl.year.value;
if (isFourDigitYear(year)) {
var month = top.newWin.frames['topCalFrame'].document.calControl.month.selectedIndex;
?? 快捷鍵說明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -