一个简单的日历控件

*{font-size:12px;margin:0;}
#rili{font:Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#F4F4F4;
color:#336699;
text-align:center;
margin:10px;
}
.red{color:red;}
.title{font-weight:bold;}
.today{background-color:#669999;}
.affair{background:#CCCCCC;}

效果图：

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="";
if(sign==1){
for(var i=0,monthLength=monthArray.length;i";
for(var i=0,arylength=weekDayArray.length;i"+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(新)";
$("affairDiv").style.display="none";

return;
}

//取消保存事务 并关闭层
function closeAffair(){
if($("affairDiv"))
$("affairDiv").style.display="none";
}

//如果已经创建了该层 就直接显示 不用创建
function showAffairDiv(day){
$("affairDiv").style.display="";
$("affairDate").innerHTML=defaultYear+"-"+(defaultMonth+1)+"-"+day; //显示的时候做加处理 由显示提取做减处理
var obj=getAffairValue(new Date(defaultYear,defaultMonth,parseInt(day)));

$("affairTheme").value=obj.theme;
$("affairContent").value=obj.content;
return;
//getAffairValue(
}

//创建事务的层
function createAffairDiv(src,value){
var div=document.createElement("div");
div.id="affairDiv";
while(src.offsetParent){
src=src.offsetParent;
if(src.tagName.toLowerCase()=="table")
break;
}
var position=getPosition(src,value);
div.style.position="absolute";
div.style.zIndex=300;
div.style.left=position.x+"px";
div.style.top=position.y+"px";
div.style.width=(src.currentStyle)?src.currentStyle.width:document.defaultView.getComputedStyle(src,null).width;
div.style.height=(src.currentStyle)?src.currentStyle.height:document.defaultView.getComputedStyle(src,null).height;
var date=new Date(defaultYear,defaultMonth,parseInt(value));
var str="";
str+="";
str+="";
str+="";
str+=""
str+="

主题：
日期：	"+date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"
内容：

";
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

功能就是日历控件的基本功能，另外，添加了一个记事功能！不过只是保存到页面的一个变量里