popcalendar.js

实现了一个OA系统基本的功能

var language = 'en';	// Default Language: en - english ; es - spanish; de - german; no - norwegian
var enablePast = 0;		// 0 - disabled ; 1 - enabled
var fixedX = -1;		// x position (-1 if to appear below control)
var fixedY = -1;		// y position (-1 if to appear below control)
var startAt = 1;		// 0 - sunday ; 1 - monday
var showWeekNumber = 1;	// 0 - don't show; 1 - show
var showToday = 1;		// 0 - don't show; 1 - show
var imgDir = imgDir ? imgDir : '/oa/images/';	// directory for images ... e.g. var imgDir="/img/"
var dayName = '';
var gotoString= new Array();
var todayString= new Array();
var weekString= new Array();
var scrollLeftMessage= new Array();
var scrollRightMessage= new Array();
var selectMonthMessage= new Array();
var selectYearMessage= new Array();
var selectDateMessage= new Array();
var monthName= new Array();
var monthName2= new Array();

function loadArrays(){
	gotoString = {
		en : 'clear birthday',
		cn : '清除日期选项内容'
	};
	
	todayString = {
		en : '',
		cn : ''
	};
	
	weekString = {
		en : 'Wk',
		cn : '周'
	};
	
	scrollLeftMessage = {
		en : 'Click to scroll to previous month. Hold mouse button to scroll automatically.',
		cn : '点击前往上一月，按住保持自动滚动.'
	};
	
	scrollRightMessage = {
		en : 'Click to scroll to next month. Hold mouse button to scroll automatically.',
		cn : '点击前往下一月，按住保持自动滚动.'
	};
	
	selectMonthMessage = {
		en : 'Click to select a month.',
		cn : '点击选择月份'
	};
	
	selectYearMessage = {
		en : 'Click to select a year.',
		cn : '点击选择年份'
	};
	
	selectDateMessage = {		// do not replace [date], it will be replaced by date.
		en : 'Select [date] as date.',
		cn : '选择 [date] 作为日期.'
	};
	
	monthName = {
		en : new Array('January','February','March','April','May','June','July','August','September','October','November','December'),
		cn : new Array('一月份','二月份','三月份','四月份','五月份','六月份','七月份','八月份','九月份','十月份','十一月份','十二月份')
	};
	
	monthName2 = {
		en : new Array('JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'),
		cn : new Array('一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月')
	};
	
	if (startAt==0) {
		dayName = {
			en : new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat'),
			cn : new Array('日','一','二','三','四','五','六')
		};
		} else {
			dayName = {
				en : new Array('Mon','Tue','Wed','Thu','Fri','Sat','Sun'),
				cn : new Array('一','二','三','四','五','六','日')
			};
		}

}

var crossobj, crossMonthObj, crossYearObj, monthSelected, yearSelected, dateSelected, omonthSelected, oyearSelected, odateSelected, monthConstructed, yearConstructed, intervalID1, intervalID2, timeoutID1, timeoutID2, ctlToPlaceValue, ctlNow, dateFormat, nStartingYear, selDayAction, isPast;
var visYear  = 0;
var visMonth = 0;
var bPageLoaded = false;
var ie  = document.all;
var dom = document.getElementById;
var today    = new Date();
var dateNow  = today.getDate();
var monthNow = today.getMonth();
var yearNow  = today.getYear();
var imgsrc   = new Array('drop1.gif','drop2.gif','left1.gif','left2.gif','right1.gif','right2.gif');
var img      = new Array();
var bShow    = false;

var hour = 00;
var minute = 00;
var second = 00;
function setHour(VHour) {
	if(VHour.length==2) {
		hour = VHour;
	} else if(VHour.length==1) {
		hour ='0'+ VHour;
	}
	
}

function setMinute(VMinute) {
	if(VMinute.length==2) {
		minute = VMinute;
	}else if(VMinute.length==1) {
		minute = '0' + VMinute;
	}
}

function setSecond(VSecond) {
	if(VSecond.length==2) {
		second = VSecond;
	}else if(VSecond.length==1) {
		second ='0'+ VSecond;
	}
}



/* hides <select> and <applet> objects (for IE only) */
function hideElement( elmID, overDiv ) {
	if(ie) {
		for(i = 0; i < document.all.tags( elmID ).length; i++) {
			obj = document.all.tags( elmID )[i];
			if(!obj || !obj.offsetParent) continue;

			// Find the element's offsetTop and offsetLeft relative to the BODY tag.
			objLeft   = obj.offsetLeft;
			objTop    = obj.offsetTop;
			objParent = obj.offsetParent;

			while(objParent.tagName.toUpperCase() != 'BODY') {
				objLeft  += objParent.offsetLeft;
				objTop   += objParent.offsetTop;
				objParent = objParent.offsetParent;
			}

			objHeight = obj.offsetHeight;
			objWidth  = obj.offsetWidth;

			if((overDiv.offsetLeft + overDiv.offsetWidth) <= objLeft);
			else if((overDiv.offsetTop + overDiv.offsetHeight) <= objTop);
			/* CHANGE by Charlie Roche for nested TDs*/
			else if(overDiv.offsetTop >= (objTop + objHeight + obj.height));
			/* END CHANGE */
			else if(overDiv.offsetLeft >= (objLeft + objWidth));
			else {
				obj.style.visibility = 'hidden';
			}
		}
	}
}

/*
* unhides <select> and <applet> objects (for IE only)
*/
function showElement(elmID) {
	if(ie) {
		for(i = 0; i < document.all.tags( elmID ).length; i++) {
			obj = document.all.tags(elmID)[i];
			if(!obj || !obj.offsetParent) continue;
			obj.style.visibility = '';
		}
	}
}

if (dom) {
	for	(i=0;i<imgsrc.length;i++) {
		img[i] = new Image;
		img[i].src = imgDir + imgsrc[i];
	}
	//document.write('<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"></head><body>');
	document.write('<div onclick="bShow=true" id="pccalendar" style="z-index:+999;position:absolute;visibility:hidden;filter:progid:DXImageTransform.Microsoft.Shadow(color=\'#aaaaaa\',Direction=135,Strength=2)"><table style="width:'+((showWeekNumber==1)?250:220)+'px;font:11px Arial;border:1px solid #A0A0A0;background:#fff"><tr bgcolor="#5d83c9"><td style=""><table width="'+((showWeekNumber==1)?248:218)+'"><tr><td style="padding:2px;font:bold 11px Arial;color:#fff"><span id="pccaption"></span></td><td align="right"  style=""><a href="javascript:hideCalendar()"><img src="'+imgDir+'close.gif" width="15" height="13" border="0" /></a></td></tr></table></td></tr><tr><td style="padding:5px;background:#fff"><span id="pccontent"></span></td></tr>');

	if (showToday == 1) {
		document.write ('<tr bgcolor="#f0f0f0"><td style="padding:5px;text-align:center"><span id="pclblToday"></span></td></tr>');
	}

	document.write('</table></div><div id="pcselectMonth" style="z-index:+999;position:absolute;visibility:hidden;"></div><div id="pcselectYear" style="z-index:+999;position:absolute;visibility:hidden;"></div>');
	//document.write('</html></body>');
}

var styleAnchor = 'text-decoration:none;color:black;';
var styleLightBorder = 'border:1px solid #a0a0a0;';

function swapImage(srcImg, destImg) {
	if (ie) document.getElementById(srcImg).setAttribute('src',imgDir + destImg);
}

function init() {
	if (!ie) yearNow += 1900;

	crossobj=(dom)? document.getElementById('pccalendar').style : ie? document.all.pccalendar : document.pccalendar;
	hideCalendar();

	crossMonthObj = (dom) ? document.getElementById('pcselectMonth').style : ie ? document.all.pcselectMonth : document.pcselectMonth;

	crossYearObj = (dom) ? document.getElementById('pcselectYear').style : ie ? document.all.pcselectYear : document.pcselectYear;

	monthConstructed = false;
	yearConstructed = false;

	sHTML1  = '<span style="border:1px solid #FFF;cursor:pointer" onmouseover="swapImage(\'pcchangeLeft\',\'left2.gif\');this.style.borderColor=\'#8af\';window.status=\''+scrollLeftMessage[language]+'\'" onclick="decMonth()" onmouseout="clearInterval(intervalID1);swapImage(\'pcchangeLeft\',\'left1.gif\');this.style.borderColor=\'#FFF\';window.status=\'\'" onmousedown="clearTimeout(timeoutID1);timeoutID1=setTimeout(\'StartDecMonth()\',500)" onmouseup="clearTimeout(timeoutID1);clearInterval(intervalID1)">&nbsp<img id="pcchangeLeft" src="'+imgDir+'left1.gif" width="10" height="11" border="0">&nbsp</span>&nbsp;';
	sHTML1 += '<span style="border:1px solid #FFF;cursor:pointer" onmouseover="swapImage(\'pcchangeRight\',\'right2.gif\');this.style.borderColor=\'#8af\';window.status=\''+scrollRightMessage[language]+'\'" onmouseout="clearInterval(intervalID1);swapImage(\'pcchangeRight\',\'right1.gif\');this.style.borderColor=\'#FFF\';window.status=\'\'" onclick="incMonth()" onmousedown="clearTimeout(timeoutID1);timeoutID1=setTimeout(\'StartIncMonth()\',500)" onmouseup="clearTimeout(timeoutID1);clearInterval(intervalID1)">&nbsp<img id="pcchangeRight" src="'+imgDir+'right1.gif" width="10" height="11" border="0">&nbsp</span>&nbsp;';
	sHTML1 += '<span id="pcspanMonth" style="border:1px solid #FFF;cursor:pointer" onmouseover="swapImage(\'pcchangeMonth\',\'drop2.gif\');this.style.borderColor=\'#8af\';window.status=\''+selectMonthMessage[language]+'\'" onmouseout="swapImage(\'pcchangeMonth\',\'drop1.gif\');this.style.borderColor=\'#FFF\';window.status=\'\'" onclick="popUpMonth()"></span>&nbsp;';
	sHTML1 += '<span id="pcspanYear" style="border:1px solid #FFF;cursor:pointer" onmouseover="swapImage(\'pcchangeYear\',\'drop2.gif\');this.style.borderColor=\'#8af\';window.status=\''+selectYearMessage[language]+'\'" onmouseout="swapImage(\'pcchangeYear\',\'drop1.gif\');this.style.borderColor=\'#FFF\';window.status=\'\'" onclick="popUpYear()"></span>&nbsp;';
	document.getElementById('pccaption').innerHTML = sHTML1;

	bPageLoaded=true;
}

// holidays...
var HolidaysCounter = 0;
var Holidays = new Array();
function HolidayRec (d, m, y, desc) {
	this.d = d;
	this.m = m;
	this.y = y;
	this.desc = desc;
}
function addHoliday (d, m, y, desc) {Holidays[HolidaysCounter++] = new HolidayRec (d, m, y, desc);}


function hideCalendar() {
	crossobj.visibility = 'hidden';
	if (crossMonthObj != null) crossMonthObj.visibility = 'hidden';
	if (crossYearObj  != null) crossYearObj.visibility = 'hidden';
	showElement('SELECT');
	showElement('APPLET');
}

function padZero(num) {
	return (num	< 10) ? '0' + num : num;
}

function constructDate(d,m,y) {
	sTmp = dateFormat;
	sTmp = sTmp.replace ('dd','<e>');
	sTmp = sTmp.replace ('d','<d>');
	sTmp = sTmp.replace ('<e>',padZero(d));
	sTmp = sTmp.replace ('<d>',d);
	sTmp = sTmp.replace ('mmmm','<p>');
	sTmp = sTmp.replace ('mmm','<o>');
	sTmp = sTmp.replace ('mm','<n>');
	sTmp = sTmp.replace ('m','<m>');
	sTmp = sTmp.replace ('<m>',m+1);
	sTmp = sTmp.replace ('<n>',padZero(m+1));
	sTmp = sTmp.replace ('<o>',monthName[language][m]);
	sTmp = sTmp.replace ('<p>',monthName2[language][m]);
	sTmp = sTmp.replace ('yyyy',y);
	sTmp = sTmp.replace ('yy',padZero(y%100));
	sTmp = sTmp.replace ('hh',hour);
	sTmp = sTmp.replace ('xx',minute);
	sTmp = sTmp.replace ('ss',second);
	return sTmp.replace ('yy',padZero(y%100));
}

function closeCalendar() {
	hideCalendar();
	ctlToPlaceValue.value = constructDate(dateSelected,monthSelected,yearSelected);
}

/*** Month Pulldown	***/
function StartDecMonth() {
	intervalID1 = setInterval("decMonth()",80);
}

function StartIncMonth() {
	intervalID1 = setInterval("incMonth()",80);
}

function incMonth () {
	monthSelected++;
	if (monthSelected > 11) {
		monthSelected = 0;
		yearSelected++;
	}
	constructCalendar();
}

function decMonth () {
	monthSelected--;
	if (monthSelected < 0) {
		monthSelected = 11;
		yearSelected--;
	}
	constructCalendar();
}

function constructMonth() {
	popDownYear()
	if (!monthConstructed) {
		sHTML = "";
		for (i=0; i<12; i++) {
			sName = monthName[language][i];
			if (i == monthSelected){
				sName = '<b>' + sName + '</b>';
			}
			sHTML += '<tr><td id="m' + i + '" onmouseover="this.style.backgroundColor=\'#909090\'" onmouseout="this.style.backgroundColor=\'\'" style="cursor:pointer;color:#006" onclick="monthConstructed=false;monthSelected=' + i + ';constructCalendar();popDownMonth();event.cancelBubble=true">&nbsp;' + sName + '&nbsp;</td></tr>';
		}

		document.getElementById('pcselectMonth').innerHTML = '<table style="width:70px;font:11px Arial;border:1px solid #a0a0a0;" bgcolor="#f0f0f0" cellspacing="0" onmouseover="clearTimeout(timeoutID1)" onmouseout="clearTimeout(timeoutID1);timeoutID1=setTimeout(\'popDownMonth()\',100);event.cancelBubble=true">' + sHTML + '</table>';

		monthConstructed = true;
	}
}

function popUpMonth() {
	if (visMonth == 1) {
		popDownMonth();
		visMonth--;
	} else {
		constructMonth();
		crossMonthObj.visibility = (dom||ie) ? 'visible' : 'show';
		crossMonthObj.left = parseInt(crossobj.left) + 50;
		crossMonthObj.top = parseInt(crossobj.top) + 26;
		hideElement('SELECT', document.getElementById('pcselectMonth'));
		hideElement('APPLET', document.getElementById('pcselectMonth'));
		visMonth++;
	}
}

function popDownMonth() {
	crossMonthObj.visibility = 'hidden';
	visMonth = 0;
}

/*** Year Pulldown ***/
function incYear() {
	var nowYear=new Date().getFullYear();
	for (i=0; i<19; i++) {
		newYear = (i + nStartingYear) + 1;
		
		if (newYear == yearSelected)
			txtYear = '<span style="color:#006;font-weight:bold;">&nbsp;' + newYear + '&nbsp;</span>';
		else
			txtYear = '<span style="color:#006">&nbsp;' + newYear + '&nbsp;</span>';
		document.getElementById('y'+i).innerHTML = txtYear;
	}
	if (newYear>=nowYear) return false;
	nStartingYear++;
	bShow=true;
}

function decYear() {
	var nowYear=new Date().getFullYear();
	for (i=0; i<19; i++) {
		newYear = (i + nStartingYear) - 1;
		if (newYear<1900) return false;
		if (newYear == yearSelected)
			txtYear = '<span style="color:#006;font-weight:bold">&nbsp;' + newYear + '&nbsp;</span>';
		else
			txtYear = '<span style="color:#006;">&nbsp;' + newYear + '&nbsp;</span>';