一个简单的日历控件

效果图： <script language=javascript> var defaultDate=new Date(); var startYear,startMonth,startDay; //变量定义需要改一下，用default来定义当天的所有信息 不能改变 var defaultMonth=defaultDate.getMonth(); var defaultYear=defaultDate.getFullYear(); var tempThis=null; var infor={ date:null, theme:"", content:"" }; var inforArray=[]; startYear=defaultYear; startMonth=defaultMonth; startDay=defaultDate.getDate(); /*月份可以选择为英文显示*/ var monthArray=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]; var weekDayArray=["星期天","星期一","星期二","星期三","星期四","星期五","星期六"]; function getFirstDay(year,month){ return new Date(year,month,01); } function $(o){ return (typeof o =="string")?document.getElementById(o):o; } /*比较两个日期是否是相同*/ function compareDate(date1,date2){ if(date1.getFullYear()==date2.getFullYear()&&date1.getMonth()==date2.getMonth()&&date1.getDate()==date2.getDate()) return true; else return false; } //前一个月 function changeMonth(sign){ //改变月份 if(sign==1&&defaultMonth==11){ defaultMonth=0; defaultYear+=sign; } else if(sign==-1 && defaultMonth==0){ defaultMonth=11; defaultYear+=sign; } else{ defaultMonth+=sign; } rebuildRiLi(new Date(defaultYear,defaultMonth,1)); } //得到快速选择的层字符串 function getDivString(sign,divWidth){ var str=" "+monthArray[i]+""; } }else if (sign==0){ var temporaryYear=defaultYear-6; for(var i=0;i<12;i++){ str+=" "; if(sign==1){ for(var i=0,monthLength=monthArray.length;i

"+(temporaryYear++)+"

"; } }else { alert("sign参数错误，只能为1或者0"); return null; } str+=" "; return str; } //快速切换年月 当标志位为1时切换月 当标志位为0时切换年 function quickChange(event,sign){ if(sign==1&&$("monthDiv")){ $("monthDiv").style.display=""; return; } else if(sign==0&&$("yearDiv")){ $("yearDiv").style.display=""; $("yearDiv").innerHTML=getDivString(sign); return; } var e=window.event||event; var src=e.srcElement||e.target; var divPosition=getPosition(src); var divWidth=(src.currentStyle)?src.currentStyle.width:document.defaultView.getComputedStyle(src,null).width; var div=document.createElement("div"); div.id=(sign==1)?"monthDiv":"yearDiv"; div.style.position="absolute"; div.style.zIndex=100; div.style.left=divPosition.x+"px"; div.style.top=divPosition.y+"px"; /* var str=" "+monthArray[i]+""; } } else if (sign==0){ var temporaryYear=defaultYear-6; for(var i=0;i<12;i++){ str+=" "; if(sign==1){ for(var i=0,monthLength=monthArray.length;i

"+(temporaryYear++)+"

"; } } else { alert("传递了错误的参数sign,只能为1或0"); return; } str+=" "; */ div.innerHTML=getDivString(sign,divWidth); document.body.appendChild(div); } //改变日期 sign为1时改变月 sign为0时改变年 function hiddenAndChange(id,sign,value){ if($(id)) $(id).style.display="none"; if(sign==1) defaultMonth=parseInt(value.substr(value.indexOf("s")+1)); else if(sign==0) defaultYear=parseInt(value.substr(value.indexOf("s")+1)); rebuildRiLi(new Date(defaultYear,defaultMonth,1)); } //得到触发对象的位置 function getPosition(src){ var o={x:0,y:0}; while(src.offsetParent){ o.x+=src.offsetLeft; o.y+=src.offsetTop; src=src.offsetParent; } return o; } //在没建立新的页面的时候 检查是否有任务 /* 参数设置： day:检查的号数 返回值：存在返回true 不存在返回false */ function checkMission(day){ var aryLength=inforArray.length; if(aryLength==0) return; for(var i=0;i <"+date.getFullYear()+"年"+monthArray[date.getMonth()]+">"; for(var i=0,arylength=weekDayArray.length;i "; else riLiString+=""+weekDayArray[i]+""; } riLiString+=""; var firstDay=getFirstDay(defaultYear,defaultMonth).getDay(); //取得当月的1号是星期几 for(var i=0;i "+i; else riLiString+=" /" οnmοuseοver=/"this.style.cursor='pointer';this.style.backgroundColor='#6699CC';/" οnclick=/"checkAffair(event,this.innerHTML)/" οnmοuseοut=/"this.style.backgroundColor='#F4F4F4';/">"+i; if(checkMission(i)) riLiString+=" (新)"; riLiString+=""; remnantLength-=1; if(remnantLength==0){ riLiString+=""; remnantLength=colLength; } } riLiString+=""; return riLiString; } //事务检查 /* 参数设置： event:触发的事件 day:触发的号数 */ function checkAffair(event,day){ var e=window.event||event; var src=e.srcElement||e.target; tempThis=src; // 取得当前的控件 if(!$("affairDiv")){ var div=createAffairDiv(src,day); //创建层 修改信息 查看信息的层 document.body.appendChild(div); $("affairTheme").focus(); $("affairTheme").select(); }else { showAffairDiv(day); } } //保存事务 /* 先做成每天只能保存一个记录的 今后再做调整 */ function saveAffair(){ var reg=/^/s*||/s*$/g; var contentString=$("affairContent").value.replace(reg,""); var themeString=$("affairTheme").value.replace(reg,""); if(themeString.length==0){ alert("主题不能为空"); $("affairContent").focus(); return; } if(contentString.length==0){ alert("内容信息不能为空"); $("affairContent").focus(); return; } var obj={},dateArray; var dateString=$("affairDate").innerHTML; if(dateString.indexOf("<")>-1) dateArray=dateString.substring(0,dateString.indexOf("<")).split("-"); else dateArray=dateString.split("-"); obj.date=new Date(dateArray[0],(parseInt(dateArray[1])-1),dateArray[2]); obj.theme=themeString; obj.content=contentString; var aryLength=inforArray.length; for(var i=0;i "; str+="日期："+date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+""; str+="内容： "; str+=" " str+=""; div.innerHTML=str; return div; } //取得事务信息 /* date为取得的时间 //sign为1的时候取得主题信息 //sign为0的时候取得内容信息 //obj为要添加内容信息的控件 */ function getAffairValue(date){ var affairLength=inforArray.length; if(affairLength==0) return {theme:"",content:""}; var returnObj={theme:"",content:""}; for(var i=0;i 功能就是日历控件的基本功能，另外，添加了一个记事功能！不过只是保存到页面的一个变量里