PopCalendar 3.50注释版

/***********************************************************************************
 * PopCalendar 3.50, Emailware(please mail&commend me if u like it)               
 * Originally coded by Liming(Victor) Weng, email: victorwon@netease.com          
 * Release date: 2000.3.13                                                        
 * Commented by 新月/小剑                                                        
 * From http://138001104.qzone.qq.com                                             
 * Release date: 2008.2.15                                                        
 * Email: zongxu@vip.qq.com                                                       
 * Anyone could modify it to satify his needs, but please leave this comment ahead.
 * Param: popCtrl is the widget beyond which you want this calendar to appear;    
 *        dateCtrl is the widget into which you want to put the selected date.    
 * i.e.: <input type="text" name="dc" style="text-align:center" readonly>         
 *    <INPUT type="button" value="V" οnclick="fPopCalendar(dc,dc);return false">
 ***********************************************************************************/
var gdCtrl = new Object();
var goSelectTag = new Array();
var gcGray = "#808080";
var gcToggle = "#ffff00";
var gcBG = "#cccccc";

var gdCurDate = new Date();
var giYear = gdCurDate.getFullYear();
var giMonth = gdCurDate.getMonth()+1;
var giDay = gdCurDate.getDate();

//popCtrl 为日历打开时的定位位置的控件
//dateCtrl 为日期选定后，日期的显示位置
function fPopCalendar(popCtrl, dateCtrl){
 //取消事件起泡
  event.cancelBubble=true;
  //获得 dateCtrl 中的日期值，并赋给变量 dateValue
  gdCtrl = dateCtrl;
  var dateValue = popCtrl.value;
  //如果dateValue不为空
  if(dateValue != ""){
   //日期格式为yyyy-mm-dd
   arrDate = dateValue.split("-");
   //分别获得年份和月份
   var selYear = arrDate[0];
   var selMonth = arrDate[1]*1;
   //调用函数fSetYearMonth()
   fSetYearMon(selYear,selMonth);
  }
  else
   //giYear,giMonth为当前年份和月份
   fSetYearMon(giYear, giMonth);
  //获得需要显示日历的绝对坐标
  var point = fGetXY(popCtrl);
  //设置VicPopCal的各项属性
  with(VicPopCal.style){
   left = point.x;
   //放在目标对象popCtrl的正下方
  top  = point.y+popCtrl.offsetHeight+1;
  width = VicPopCal.offsetWidth;
  height = VicPopCal.offsetHeight;
  //
  fToggleTags(point);
  //设置 visibility属性为"可见"
  visibility = 'visible';
  }
  //聚焦于VicPopCal
  VicPopCal.focus();
}

//函数fSetYearMonth()
//根据iYear，iMonth的值设置日历的年份,月份显示
function fSetYearMon(iYear, iMon){
 //设置日历上tbSelMonth中的月份显示
  tbSelMonth.options[iMon-1].selected = true;
  //设置tbSelYearzhone的年份显示
  //tbSelYear.length为tbSelYear中option的个数
  for(i = 0; i < tbSelYear.length; i++){
  if(tbSelYear.options[i].value == iYear)
   tbSelYear.options[i].selected = true;
 }
 //更新显示日期控件
  fUpdateCal(iYear, iMon);
}

//函数fUpdateCal()
//设置日期显示格式,并更新控件
function fUpdateCal(iYear, iMonth){
 //调用fBuildCal()函数，获得iYear年iMonth月日历显示数组
  myMonth = fBuildCal(iYear, iMonth);
  //用途不明
  var i = 0;
  //设置每一日期的显示格式(颜色方面)
  for(w = 0; w < 6; w++)
  for(d = 0; d < 7; d++)
   with(cellText[(7 * w) + d]){
    //Victor用途不明
    Victor = i++;
    if(myMonth[w + 1][d] < 0){
     //为负数（上个月和下个月的）的部分用gcGray色表示
     color = gcGray;
     //数值转为正数
     innerText = -myMonth[w + 1][d];
    }else{
     //周六和周日用红色表示，其余用黑色
     color = ((d==0)||(d==6))?"red":"black";
     innerText = myMonth[w + 1][d];
    }
  }
}

//函数fBuildCal()
//根据iYear，iMonth建立日历显示数组，并返回
function fBuildCal(iYear, iMonth){
 //定义日历中X年X月的显示数组aMonth
  var aMonth = new Array();
  //继续完成上述定义
  //这里定义的二维数组似乎有点问题，会产生数组下标越界
  //aMonth[i] = new Array(i)应改成aMount[i] = new Array(7)
  //但是经过测试，js的数组貌似可以动态增加，因此不会报错
  for(i = 1;i < 7;i++)
   aMonth[i] = new Array(i);
 //根据年份月份创建日期对象dCalDate
  var dCalDate = new Date(iYear, iMonth - 1, 1);
  //获得iYear年iMonth月1日为某星期的哪一天
  var iDayOfFirst = dCalDate.getDay();
  //获得iYear年iMonth月的天数
  var iDaysInMonth = new Date(iYear, iMonth, 0).getDate();
  //获得日历显示中第一行第一列的日期
  //方法：上个月的天数 - 本月第一天的星期数 + 1
  //星期数的取值范围是 0 - 6
  var iOffsetLast = new Date(iYear, iMonth - 1, 0).getDate() - iDayOfFirst + 1;
  //iDate为本月日期计数器
  var iDate = 1;
  //iNext为下月日期计数器
  var iNext = 1;
 //把日历控件中的第一行添加到数组aMonth中
 //上个月的部分用相应的负数表示
  for(d = 0; d < 7; d ++)
  aMonth[1][d] = (d < iDayOfFirst) ? -(iOffsetLast + d) : iDate++ ;
 //添加其余诸行，不够的部分用下月的开始几天补全
 //下个月的部分用相应的负数表示
  for(w = 2; w < 7; w ++){
   for(d = 0; d < 7; d ++)
   aMonth[w][d] = (iDate <= iDaysInMonth) ? iDate++ : -(iNext++);
 }
 //返回日历显示数组
  return aMonth;
}

//函数gGetXY()
//获得aTag的绝对坐标,并返回
function fGetXY(aTag){
  var oTmp = aTag;
  //定义坐标对象
  var pt = new Point(0,0);
  //通过不断的叠加相对偏移量来获得绝对坐标
  do {
   //叠加相对左边的偏移量
   pt.x += oTmp.offsetLeft;
   //叠加相对顶部的偏移量
   pt.y += oTmp.offsetTop;
   //改变包容元素,向上传递
   oTmp = oTmp.offsetParent;
   //直到包容元素为"BODY" 为止
  } while(oTmp.tagName!="BODY");
  //返回绝对坐标对象
  return pt;
}

//坐标类Point的构造函数
//拥有属性x和y
function Point(iX, iY){
 this.x = iX;
 this.y = iY;
}
//函数fDrawCal()
//日历面板显示
function fDrawCal(iYear, iMonth, iCellHeight, iDateTextSize){
  var WeekDay = new Array("日","一","二","三","四","五","六");
  var styleTD = " bgcolor='"+gcBG+"' bordercolor='"+gcBG+"' valign='middle' align='center' height='"+iCellHeight+"' style='font:bold "+iDateTextSize+" 宋体;";
  with(document){
  write("<tr>");
  //显示WeekDay数组内容
  for(i=0; i<7; i++)
   write("<td "+styleTD+"color:#990099' >" + WeekDay[i] + "</td>");
  write("</tr>");  
   for(w = 1; w < 7; w++){
   write("<tr>");
   for(d = 0; d < 7; d++){
    write("<td id=calCell "+styleTD+"cursor:hand;' onMouseOver='this.bgColor=gcToggle' onMouseOut='this.bgColor=gcBG' οnclick='fSetSelected(this)'>");
    write("<font id=cellText Victor='Liming Weng'> </font>");
    write("</td>")
   }
   write("</tr>");
  }
  }
}

function fSetSelected(aCell){
  var iOffset = 0;
  var iYear = parseInt(tbSelYear.value);
  var iMonth = parseInt(tbSelMonth.value);
  aCell.bgColor = gcBG;
  with (aCell.children["cellText"]){
   var iDay = parseInt(innerText);
   if (color==gcGray)
  iOffset = (Victor<10)?-1:1;
  iMonth += iOffset;
  if (iMonth<1) {
   iYear--;
   iMonth = 12;
  }else if (iMonth>12){
   iYear++;
   iMonth = 1;
  }
  }
  fSetDate(iYear, iMonth, iDay);
}
//函数fSetDate()
//在目标对象中显示选中日期
function fSetDate(iYear, iMonth, iDay){
  gdCtrl.value = iYear+"-"+iMonth+"-"+iDay;
  fHideCalendar();
}

function fHideCalendar(){
  VicPopCal.style.visibility = "hidden";
  for (i in goSelectTag)
   goSelectTag[i].style.visibility = "visible";
  goSelectTag.length = 0;
}

//显示上一个月
function fPrevMonth(){
  var iMonth = tbSelMonth.value;
  var iYear = tbSelYear.value;
  if(--iMonth < 1){
   iMonth = 12;
   iYear--;
  }
  fSetYearMon(iYear, iMonth);
}
//显示下一个月
function fNextMonth(){
  var iMonth = tbSelMonth.value;
  var iYear = tbSelYear.value;
  if(++iMonth > 12){
   iMonth = 1;
   iYear++;
  }
  fSetYearMon(iYear, iMonth);
}

var gMonths = new Array("&nbsp;一月","&nbsp;二月","&nbsp;三月","&nbsp;四月","&nbsp;五月","&nbsp;六月","&nbsp;七月","&nbsp;八月","&nbsp;九月","&nbsp;十月","十一月","十二月");

with (document) {
 write("<Div id='VicPopCal' οnclick='event.cancelBubble=true' style='POSITION:absolute;visibility:hidden;border:2px ridge;width:10;z-index:100;'>");
 write("<table border='0' bgcolor='#ffffff'>");
 write("<TR>");
 write("<td valign='middle' align='center'><input type='button' name='PrevMonth' value='<' style='height:20;width:20;FONT:bold' onClick='fPrevMonth()'>");
 write("&nbsp;<SELECT name='tbSelYear' onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won'>");
 for(i=2000;i<2020;i++)
  write("<OPTION value='"+i+"'>"+i+"年</OPTION>");
 write("</SELECT>");
 write("&nbsp;<select name='tbSelMonth' onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won'>");
 for (i=0; i<12; i++)
  write("<option value='"+(i+1)+"'>"+gMonths[i]+"</option>");
 write("</SELECT>");
 write("&nbsp;<input type='button' name='PrevMonth' value='>' style='height:20;width:20;FONT:bold' οnclick='fNextMonth()'>");
 write("</td>");
 write("</TR><TR>");
 write("<td align='center'>");
 write("<DIV style='background-color:teal'><table width='100%' border='0' cellpadding='2'>");
 fDrawCal(giYear, giMonth, 12, 12);
 write("</table></DIV>");
 write("</td>");
 write("</TR><TR><TD align='center'>");
 write("<B style='cursor:hand; font: bold 14 宋体' οnclick='fSetDate(giYear,giMonth,giDay)' onMouseOver='this.style.color=gcToggle' onMouseOut='this.style.color=0'>今天："+giYear+"年"+giMonth+"月"+giDay+"日</B>");
 write("</TD></TR>");
 write("</TABLE></Div>");
 write("<SCRIPT event=onclick() for=document>fHideCalendar()</SCRIPT>");
}