自己写的JS日历

calendar.css
/* CSS Document */
.divhouer{
 width:40px;
 height:40px;
 background-color:#FFFFFF;
 color:#0000FF;
 text-align:center;
 vertical-align:middle;
 border:outset;
 float:left;
}
.divhouer A
{
 font-size:30px;
 font-family:宋体;
 font-weight:bold;
}
.div24houers{
 width:300px;
 background-color:#FFFFFF;
 color:#0000FF;
 text-align:center;
 vertical-align:middle;
 border:outset;
 float:left;
}
.div24houerstxt
{
 width:300px;
 height:30px;
 background-color:#FFFFFF;
 color:#0000FF;
 text-align:center;
 vertical-align:middle;
 border:outset;
 float:left;
}
.div24houerstxt A
{
 font-size:30px;
 font-family:宋体;
 font-weight:bold;
}
.divday{
 width:40px;
 height:40px;
 background-color:#FFFFFF;
 color:#0000FF;
 text-align:center;
 vertical-align:middle;
 border:outset;
 float:left;
}
.divday A
{
 font-size:30px;
 font-family:宋体;
 font-weight:bold;
}
.divperiod
{
 width:800px;
 background-color:#FFFFFF;
 color:#0000FF;
 text-align:center;
 vertical-align:middle;
 border:outset;
 float:left;
}
.divperiodtxt
{
 width:800px;
 height:30px;
 background-color:#FFFFFF;
 color:#0000FF;
 text-align:center;
 vertical-align:middle;
 border:outset;
 float:left;
}
.divperiodleft
{
 width:50px;
 height:30px;
 text-align:left;
 float:left;
}
.divperiodleft A
{
 font-size:30px;
 font-family:宋体;
 font-weight:bold;
}
.divperiodright
{
 width:50px;
 height:30px;
 text-align:right;
 float:left;
}
.divperiodright A
{
 font-size:30px;
 font-family:宋体;
 font-weight:bold;
}
.divperiodmiddle
{
 width:600px;
 height:30px;
 text-align:center;
 float:left;
}
.divperiodmiddle A
{
 font-size:30px;
 font-family:宋体;
 font-weight:bold;
}
.divmonth
{
 width:380px;
 height:230px;
 background-color:#FFFFFF;
 color:#0000FF;
 text-align:center;
 vertical-align:middle;
 border:outset;
 float:left;
}
.divmonthtxt
{
 width:370px;
 height:30px;
 background-color:#FFFFFF;
 color:#0000FF;
 text-align:center;
 vertical-align:middle;
 border:outset;
 float:left;
}
.divmonthtxt A
{
 font-size:30px;
 font-family:宋体;
 font-weight:bold;
}
--------------------------------------------------------------------------------------------------------------------
calendar.js
function CArrayList(){
 this.list= new Array();
 this.Length=function(){
  return this.list.length;
 }
 this.Add=function(item){
  this.list.push(item);
 }
 this.Del=function(item){
  for(var i= this.list.length - 1;i>=0;i--){
   if(this.list[i]==item){
    this.list.splice(i,1);
   }
  }
 }
 this.RemoveAt=function(index){
  if(index>this.list.length||index<0) return;
  this.list.splice(index,1);
 }
 this.Clear=function(){
  for(var i= this.list.length - 1;i>=0;i--){
   this.list.splice(i,1);
  }
 }
 this.ToString=function(splitvalue){
  return this.list.join(splitvalue);
 }
 this.Exist=function(item){
  for(var i=0;i<this.list.length;i++){
   if(this.list[i]==item){
    return true;
   }
  }
  return false;
 }
 this.IndexOf=function(item){
  for(var i=0;i<this.list.length;i++){
   if(this.list[i]==item){
    return i;
   }
  }
  return -1;
 }
 this.AddArray=function(arraylist){
  this.list=arraylist.reverse().concat(this.list);
 }
}
function CHour(divname,iyear,imonth,iday,ihour,shref){
 this.selected=0;
 this.divname=divname;
 this.name="hour"+iyear+imonth+iday+ihour;
 this.year=iyear;
 this.month=imonth;
 this.day=iday;
 this.id=ihour;
 this.seletedcolor="#CCCCCC";
 this.unselectedcolor="#FFFFFF";
 this.setcolor=function(selcolor,unselcolor){
  if(eval("typeof("+this.name+")")!="object") return;
  this.seletedcolor=selcolor;
  this.unselectedcolor=unselcolor;
  if(this.selected==0){
   document.getElementById(this.name).style.backgroundColor=unselcolor;
  }else{
   document.getElementById(this.name).style.backgroundColor=selcolor;
  }
 }
 this.setdefaultcolor=function(){
  this.setcolor("#CCCCCC","#FFFFFF");
 }
 this.click=function(){
  if(eval("typeof("+this.name+")")!="object") return;
  if(this.selected==0){
   document.getElementById(this.name).style.border="inset";
   document.getElementById(this.name).style.backgroundColor=this.seletedcolor;
   this.selected=1;
   f_afterselecthour(this.year,this.month,this.day,this.id);
  }else{
   document.getElementById(this.name).style.border="outset";
   document.getElementById(this.name).style.backgroundColor=this.unselectedcolor;
   this.selected=0;
   f_afterunselecthour(this.year,this.month,this.day,this.id);
  }
 }
 this.show=function(){
  if(eval("typeof("+this.divname+")")!="object") return;
  document.getElementById(this.divname).innerHTML="<div id='"+this.name+"' class='divhouer' onclick='f_clickhour("+this.year+","+this.month+","+this.day+","+this.id+");'></div>";
  if(eval("typeof("+this.name+")")!="object") return;
  shref=shref.toLowerCase();
  if(shref.indexOf('http')>=0&&shref.indexOf('.')>=0){
   document.getElementById(this.name).innerHTML='<a href="'+shref+'" target=_blank>'+this.id+'</a>';
  }else{
   document.getElementById(this.name).innerHTML='<a href="#">'+this.id+'</a>';
  }
 }
}
function C24Hours(divname,iyear,imonth,iday){
 this.divname=divname;
 this.name="hours"+iyear+imonth+iday;
 this.year=iyear;
 this.month=imonth;
 this.id=iday;
 this.hours=new Array(24);
 this.setday=function(iyear1,imonth1,iday1){
  this.name="hours"+iyear1+imonth1+iday1;
  this.year=iyear1;
  this.month=imonth1;
  this.id=iday1;
  this.show();
 }
 this.selectall=function(){
  if(eval("typeof("+this.name+")")!="object") return;
  for(var i=0;i<this.hours.length;i++){
   if(this.hours[i].selected==0){
    this.hours[i].click();
   }
  }
 }
 this.unselectall=function(){
  if(eval("typeof("+this.name+")")!="object") return;
  for(var i=0;i<this.hours.length;i++){
   if(this.hours[i].selected==1){
    this.hours[i].click();
   }
  }
 }
 this.show=function(){
  if(eval("typeof("+this.divname+")")!="object") return;
  var s="<div id='"+this.name+"' class='div24houers''><div class='div24houerstxt' onclick='f_click24hour("+this.year+","+this.month+","+this.id+");'><a>"+this.year+"年"+this.month+"月"+this.id+"日</a></div>";
  for(var i=0;i<this.hours.length;i++){
   s+="<div id='"+this.name+i+"'></div>";
  }
  s+="</div>";
  document.getElementById(this.divname).innerHTML=s;
  for(var i=0;i<this.hours.length;i++){
   this.hours[i] = new CHour(this.name+i,this.year,this.month,this.id,i,'#');
   this.hours[i].show();
  }
 }
 this.clickhour=function(hour){
  if(eval("typeof("+this.divname+")")!="object") return;
  var hourname="hour"+this.year+this.month+this.id+hour;
  for(var i=0;i<this.hours.length;i++){
   if(this.hours[i].name==hourname){
    this.hours[i].click();
    break;
   }
  }
 }
 this.setcolor=function(hour,selcolor,unselcolor){
  if(eval("typeof("+this.divname+")")!="object") return;
  var hourname="hour"+this.year+this.month+this.id+hour;
  for(var i=0;i<this.hours.length;i++){
   if(this.hours[i].name==hourname){
    this.hours[i].setcolor(selcolor,unselcolor);
    break;
   }
  }
 }
 this.setdefaultcolor=function(hour){
  if(eval("typeof("+this.divname+")")!="object") return;
  var hourname="hour"+this.year+this.month+this.id+hour;
  for(var i=0;i<this.hours.length;i++){
   if(this.hours[i].name==hourname){
    this.hours[i].setdefaultcolor();
    break;
   }
  }
 }
}
function CDay(divname,iyear,imonth,iday,shref){
 this.selected=0;
 this.divname=divname;
 this.name="day"+iyear+imonth+iday;
 this.year=iyear;
 this.month=imonth;
 this.id=iday;
 this.seletedcolor="#CCCCCC";
 this.unselectedcolor="#FFFFFF";
 this.setcolor=function(selcolor,unselcolor){
  if(eval("typeof("+this.name+")")!="object") return;
  this.seletedcolor=selcolor;
  this.unselectedcolor=unselcolor;
  if(this.selected==0){
   document.getElementById(this.name).style.backgroundColor=unselcolor;
  }else{
   document.getElementById(this.name).style.backgroundColor=selcolor;
  }
 }
 this.setdefaultcolor=function(){
  this.setcolor("#CCCCCC","#FFFFFF");
 }
 this.click=function(){
  if(eval("typeof("+this.name+")")!="object") return;
  if(this.selected==0){
   document.getElementById(this.name).style.border="inset";
   document.getElementById(this.name).style.backgroundColor=this.seletedcolor;
   this.selected=1;
   f_afterselectday(this.year,this.month,this.id);
  }else{
   document.getElementById(this.name).style.border="outset";
   document.getElementById(this.name).style.backgroundColor=this.unselectedcolor;
   this.selected=0;
   f_afterunselectday(this.year,this.month,this.id);
  }
 }
 this.show=function(){
  if(eval("typeof("+this.divname+")")!="object") return;
  document.getElementById(this.divname).innerHTML="<div id='"+this.name+"' class='divday' onclick='f_clickday("+this.year+","+this.month+","+this.id+");'></div>";
  if(eval("typeof("+this.name+")")!="object") return;
  shref=shref.toLowerCase();
  if(shref.indexOf('http')>=0&&shref.indexOf('.')>=0){
   document.getElementById(this.name).innerHTML='<a href="'+shref+'" target=_blank>'+this.id+'</a>';
  }else{
   document.getElementById(this.name).innerHTML='<a href="#">'+this.id+'</a>';
  }
 }
}
function CMonth(divname,iyear,imonth){
 this.divname=divname;
 this.name="month"+iyear+imonth;
 this.year=iyear;
 this.id=imonth;
 var d=new Date(iyear,this.id,0);
 this.days=new Array(d.getDate());
 this.selectall=function(){
  if(eval("typeof("+this.name+")")!="object") return;
  for(var i=0;i<this.days.length;i++){
   if(this.days[i].selected==0){
    this.days[i].click();
   }
  }
 }
 this.unselectall=function(){
  if(eval("typeof("+this.name+")")!="object") return;
  for(var i=0;i<this.days.length;i++){
   if(this.days[i].selected==1){
    this.days[i].click();
   }
  }
 }
 this.show=function(){
  if(eval("typeof("+this.divname+")")!="object") return;
  var s="<div id='"+this.name+"' class='divmonth''><div class='divmonthtxt' onclick='f_clickmonth("+this.year+","+this.id+");'><a>"+this.year+"年"+this.id+"月</a></div>";
  for(var i=0;i<this.days.length;i++){
   s+="<div id='"+this.name+(i+1)+"'></div>";
  }
  s+="</div>";
  document.getElementById(this.divname).innerHTML=s;
  for(var i=0;i<this.days.length;i++){
   this.days[i] = new CDay(this.name+(i+1),this.year,this.id,i+1,'#');
   this.days[i].show();
  }
 }
 this.clickday=function(day){
  if(eval("typeof("+this.divname+")")!="object") return;
  var dayname="day"+this.year+this.id+day;
  for(var i=0;i<this.days.length;i++){
   if(this.days[i].name==dayname){
    this.days[i].click();
    break;
   }
  }
 }
 this.setcolor=function(day,selcolor,unselcolor){
  if(eval("typeof("+this.divname+")")!="object") return;
  var dayname="day"+this.year+this.id+day;
  for(var i=0;i<this.days.length;i++){
   if(this.days[i].name==dayname){
    this.days[i].setcolor(selcolor,unselcolor);
    break;
   }
  }
 }
 this.setdefaultcolor=function(day){
  if(eval("typeof("+this.divname+")")!="object") return;
  var dayname="day"+this.year+this.id+day;
  for(var i=0;i<this.days.length;i++){
   if(this.days[i].name==dayname){
    this.days[i].setdefaultcolor();
    break;
   }
  }
 }
 this.setalldefaultcolor=function(){
  if(eval("typeof("+this.divname+")")!="object") return;
  for(var i=0;i<this.days.length;i++){
   this.days[i].setdefaultcolor();
  }
 }
}
function CPeriod(divname,istartyear,istartmonth,iendyear,iendmonth){
 var icnt=0;
 if(istartyear>=iendyear){
  iendyear=istartyear;
  if(istartmonth>=iendmonth){
   iendmonth=istartmonth;
   icnt = 1;
  }else{
   icnt = iendmonth - istartmonth + 1;
  }
 }else{
  icnt = (12 - istartmonth + 1) + (iendyear - istartyear - 1)*12 + iendmonth;
 }
 this.months=new Array(icnt);
 this.startyear=istartyear;
 this.startmonth=istartmonth;
 this.endyear=iendyear;
 this.endmonth=iendmonth;
 this.divname=divname;
 this.name="period"+istartyear+istartmonth+iendyear+iendmonth;
 
 this.setperiod=function(istartyear1,istartmonth1,iendyear1,iendmonth1){
  var icnt1=0;
  if(istartyear1>=iendyear1){
   iendyear1=istartyear1;
   if(istartmonth1>=iendmonth1){
    iendmonth1=istartmonth1;
    icnt1 = 1;
   }else{
    icnt1 = iendmonth1 - istartmonth1 + 1;
   }
  }else{
   icnt1 = (12 - istartmonth1 + 1) + (iendyear1 - istartyear1 - 1)*12 + iendmonth1;
  }
  this.months=new Array(icnt1);
  this.startyear=istartyear1;
  this.startmonth=istartmonth1;
  this.endyear=iendyear1;
  this.endmonth=iendmonth1;
  this.name="period"+istartyear+istartmonth+iendyear+iendmonth;
  this.show();
 }
 this.show=function(){
  if(eval("typeof("+this.divname+")")!="object") return;
  var s="<div id='"+this.name+"' class='divperiod''><div class='divperiodtxt'>";
  s+="<div class='divperiodleft'><a href='#' onclick='f_prevcalendar();'><<</a></div><div class='divperiodmiddle'>";
  if(this.startyear==this.endyear&&this.startmonth==this.endmonth){
   s+="<a>"+this.startyear+"年"+this.startmonth+"月</a>";
  }else{
   s+="<a>"+this.startyear+"年"+this.startmonth+"月至"+this.endyear+"年至"+this.endmonth+"月</a>";
  }
  s+="</div><div class='divperiodright'><a href='#' onclick='f_nextcalendar();'>>></a></div></div>";
  for(var i=0;i<this.months.length;i++){
   s+="<div id='"+this.name+(i+1)+"'></div>";
  }
  s+="</div>";
  document.getElementById(this.divname).innerHTML=s;
  var imonth=this.startmonth;
  var iyear=this.startyear;
  for(var i=0;i<this.months.length;i++){
   this.months[i] = new CMonth(this.name+(i+1),iyear,imonth);
   this.months[i].show();
   imonth++;
   if(imonth>12){
    imonth=1;
    iyear++;
   }
  }
  f_showperiod(this.startyear,this.startmonth,this.endyear,this.endmonth);
 }
 this.clickday=function(year,month,day){
  if(eval("typeof("+this.divname+")")!="object") return;
  var monthname="month"+year+month;
  for(var i=0;i<this.months.length;i++){
   if(this.months[i].name==monthname){
    this.months[i].clickday(day);
    break;
   }
  }
 }
 this.selectmonth=function(year,month){
  var monthname="month"+year+month;
  for(var i=0;i<this.months.length;i++){
   if(this.months[i].name==monthname){
    this.months[i].selectall();
    break;
   }
  }
 }
 this.setcolor=function(year,month,day,selcolor,unselcolor){
  if(eval("typeof("+this.divname+")")!="object") return;
  var monthname="month"+year+month;
  for(var i=0;i<this.months.length;i++){
   if(this.months[i].name==monthname){
    this.months[i].setcolor(day,selcolor,unselcolor);
    break;
   }
  }
 }
 this.setdefaultcolor=function(year,month,day){
  if(eval("typeof("+this.divname+")")!="object") return;
  var monthname="month"+year+month;
  for(var i=0;i<this.months.length;i++){
   if(this.months[i].name==monthname){
    this.months[i].setdefaultcolor(day);
    break;
   }
  }
 }
 this.setalldefaultcolor=function(year,month){
  if(eval("typeof("+this.divname+")")!="object") return;
  for(var i=0;i<this.months.length;i++){
   this.months[i].setalldefaultcolor();
  }
 }
}
var thenow = new Date();
var thestartyear=thenow.getFullYear();
var thestartmonth=thenow.getMonth() + 1;
var theendyear=thestartyear;
var theendmonth=thestartmonth + 1;
if(thestartmonth==12){
 theendmonth=1;
 theendyear=thestartyear + 1;
}
/*根据需要修改初始化参数*/
var period = new CPeriod("divcalendar",thestartyear,thestartmonth,theendyear,theendmonth);
var dayhours = new C24Hours("divcalendarhours",thestartyear,thestartmonth,1);
/**/
function f_clickhour(year,month,day,hour){
 dayhours.clickhour(hour);
}
function f_click24hour(year,month,day){
 dayhours.selectall();
}
function f_clickday(year,month,day){
 period.clickday(year,month,day);
 dayhours.setday(year,month,day);
 f_changecolor();
}
function f_clickmonth(year,month){
 period.selectmonth(year,month);
}
function showcalendar(){
 period.show();
 dayhours.show();
 f_changecolor();
}
function f_nextcalendar(){
 thestartmonth=thestartmonth + 1;
 if(thestartmonth>12){
  thestartmonth=1;
  thestartyear++;
 }
 theendmonth=theendmonth + 1;
 if(theendmonth>12){
  theendmonth=1;
  theendyear=theendyear + 1;
 }
 period.setperiod(thestartyear,thestartmonth,theendyear,theendmonth); 
 f_changecolor();    
}
function f_prevcalendar(){
 thestartmonth=thestartmonth - 1;
 if(thestartmonth==0){
  thestartmonth=12;
  thestartyear--;
 }
 theendmonth=theendmonth - 1;
 if(theendmonth==0){
  theendmonth=12;
  theendyear--;
 }
 period.setperiod(thestartyear,thestartmonth,theendyear,theendmonth);
 f_changecolor();    
}

//需要实现这5个方法
function f_changecolor(){
 //修改颜色
例如
 period.setcolor(thestartyear,thestartmonth,1,'#FF6633','#FF66FF');
 period.setcolor(thestartyear,thestartmonth,2,'#FF6633','#FF66FF');
 period.setcolor(thestartyear,thestartmonth,3,'#FF6633','#FF66FF');
 period.setcolor(thestartyear,thestartmonth,4,'#FF6633','#FF66FF');
 period.setcolor(thestartyear,thestartmonth,5,'#FF6633','#FF66FF');
 period.setcolor(thestartyear,thestartmonth,6,'#FF6633','#FF66FF');
 period.setcolor(thestartyear,thestartmonth,7,'#FF6633','#FF66FF');
 period.setcolor(thestartyear,thestartmonth,8,'#FF6633','#FF66FF');
 period.setcolor(thestartyear,thestartmonth,14,'#FF6633','#FF66FF');
 period.setcolor(theendyear,theendmonth,4,'#FF6633','#FF66FF');
 period.setcolor(theendyear,theendmonth,5,'#FF6633','#FF66FF');
 period.setcolor(theendyear,theendmonth,7,'#FFCC99','#FFFF99');
 period.setcolor(theendyear,theendmonth,8,'#FFCC99','#FFFF99');
 dayhours.setcolor(3,'#FFCC99','#FFFF99');
 dayhours.setcolor(4,'#FFCC99','#FFFF99');
 dayhours.setcolor(5,'#FFCC99','#FFFF99');
 dayhours.setcolor(18,'#FFCC99','#FFFF99');
}
function f_showperiod(istartyear,istartmonth,iendyear,iendmonth){
    可以为空
}
function f_afterselectday(iyear,imonth,iday){
    可以为空
}
function f_afterunselectday(iyear,imonth,iday){
    可以为空
}
function f_afterselecthour(iyear,imonth,iday,ihour){
    可以为空
}
function f_afterunselecthour(iyear,imonth,iday,ihour){
    可以为空
}
--------------------------------------------------------------------------------------------------------------------
修改css样式就能获得不同界面效果的日历
使用时根据需要，如只需要日历
则
注释掉这句
//var dayhours = new C24Hours("divcalendarhours",thestartyear,thestartmonth,1);
只需要下面这句
var period = new CPeriod("divcalendar",thestartyear,thestartmonth,theendyear,theendmonth);

自己可以重新设置thestartyear,thestartmonth,theendyear,theendmonth参数，默认是当前月

使用日历CPeriod 需要设置div用以显示日历
同样使用时间 C24Hours也需要设置div用于显示
代码根据thestartyear,thestartmonth,theendyear,theendmonth来显示同时展现的月份数