一个很漂亮的日历

<base href=http://mozart0.uni.cc/cal/ >
<style>
.cal_0 table{
 border:none;
 font-family:tahoma;
 font-size:9px;
 text-align:center;
 }
.cal_0 th{
 height:17;
 background-image:expression("url("+MyCal.color+"_h.gif)");
 border-bottom:expression("1 solid "+MyCal.ca);
 }
.cal_0{
 background-image:url(shadow.gif);
 width:168;
 height:131;
 cursor:default;
 padding:3 4 5 3;
 position:absolute;
 }
.cal_1{
 border:expression("1 solid "+MyCal.ca);
 width:100%;
 height:100%;
 }
.d1{
 position:absolute;
 color:expression(MyCal.cb);
 font-size:96px;
 font-family:Arial black;
 font-weight:bolder;
 left:0;
 top:-9;
 width:160;
 text-align:center;
 overflow:hidden;
 z-index:-1;
 }
.d5{
 position:absolute;
 left:45;
 top:108;
 width:60;
 height:13;
 }
.d6{
 position:absolute;
 left:108;
 top:108;
 width:48;
 height:13;
 }
.cc{
 border-color:expression(MyCal.ca);
 border-width:1;
 border-style:solid;
 line-height:9px;
 }
.sel{
 position:absolute;
 border-top:none;
 top:121;
 height:135;
 overflow:hidden;
 background-color:white;
 overflow-y:auto;
 display:none;
 }
.selitem{
 font-family:tahoma;
 font-size:9px;
 line-height:11px;
 text-align:left;
 }
.p1{
 padding-left:19;
 }
.p2{
 padding-left:16;
 }
.scroll{
 scrollbar-3dlight-color:expression(MyCal.ca);
 scrollbar-arrow-color:white;
 scrollbar-face-color:white;
 scrollbar-shadow-color:white;
 scrollbar-track-color:white;
 }
</style>

<script>
 MyCal.color="green";
 MyCal.ca="#99cc00";
 MyCal.cb="#e5f5e5";
function MyCal(numYear,numMonth,numDate){
 if(typeof(oMain)!='undefined'){
  alert("one instance of MyCal per page only")
  return null;
  }
 var arg=MyCal.arguments;
 if(arg.length==3){
  this.year=arg[0];
  this.month=arg[1];
  this.date=arg[2];
  }
 else{
  var t=new Date();
  this.year=t.getYear();
  this.month=t.getMonth();
  this.date=t.getDate();
  }
 this.green=["#99cc00","#e5f5e5"];
 this.blue=["#00ccff","#e5eff5"];
 this.yellow=["#ffcc00","#ffefef"];
 this.gray=["#999999","#f0f0f0"];
 this.DayName="Sun,Mon,Tue,Wed,Thu,Fri,Sat".split(",");
 this.MonthDay=[[31,28,31,30,31,30,31,31,30,31,30,31],[31,29,31,30,31,30,31,31,30,31,30,31]];
 this.MonthName="Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec".split(",");
 for(var i in this.MonthName)
  this.MonthName[this.MonthName[i]]=i;
 this.setColor=function(str){
  if(typeof(this[str])=="undefined"){
   alert("no such color:"+str);
   return;
   }
  if(typeof(oYear)!="undefined"){
   var t=document.all("imgArr");
   for(var i=0;i<t.length;i++)
    t[i].src=t[i].src.replace(MyCal.color,str);
   }
  MyCal.color=str;
  MyCal.ca=this[str][0];
  MyCal.cb=this[str][1];
  }
 this.chgYear=function(d){
  var m=oYear.innerText;
  this.year=parseInt(m)+d;
  this.refresh();
  }
 this.chgMonth=function(d){
  var i=parseInt(this.MonthName[oMonth.innerText])+d;
  if(i==12)
   i=0;
  else if(i==-1)
   i=11;
  this.month=i;
  this.refresh();
  }
 this.chgDate=function(ob){
  if(ob==event.srcElement)
   return;
  var x=event.srcElement.innerText;
  if(x==" ")
   return;
  oDate.cells[this.date+this.day+7].style.fontWeight="normal";
  this.date=parseInt(x);
  event.srcElement.style.fontWeight="bold";
  }
 this.setDate=function(ob){
  var y0=this.year,m0=this.month;
  if(ob==event.srcElement)
   return;
  var t=ob.id.replace("sel","").toLowerCase();
  var x=event.srcElement.innerText;
  this[t]=parseInt(t=="year"?x:this.MonthName[x]);
  ob.style.display="none";
  if(y0!=this.year||m0!=this.month)
   this.refresh();
  }
 this.refresh=function(){
  oMonth.innerText=this.MonthName[this.month];  
  oYear.innerText=this.year;
  oBg.innerText=this.month+1;
  oMain.filters[0].apply();
  oMain.innerHTML=this.drawTable();
  oDate.cells[this.date+this.day+7].style.fontWeight="bold";
  oMain.filters[0].play();
  }
 this.outPut=function(){
  var str='<div class="cal_0" id=oCal onselectstart="return false;">'+
  ' <div class=d1 id=oBg>'+(this.month+1)+'</div>'+
  ' <table class="cal_1" cellspacing=0 cellpadding=0>'+
  '  <tr>';
    for(var i=0;i<7;i++)
     str+='<th>'+this.DayName[i]+'</th>';
    str+=
  '  </tr>'+
  '  <tr><td colspan=7 align=left id=oMain style="filter:blendtrans(duration=0.5)">'+
      this.drawTable()+
  '  </td><tr>'+
  '  <td colspan=7>&nbsp;</td>'+
  '  </tr>'+
  ' </table>'+
  ' <div class="d5 cc">'+
  '  <table cellpadding=0 cellspacing=0><tr>'+
  '   <td><img id=imgArr src="'+MyCal.color+'_al0.gif" οnclick="CalOb.chgYear(-1)"></td>'+
  '   <td width=44 class=cc style="border-width:0 1 0 1;cursor:hand" valign=bottom id=oYear>'+this.year+'</td>'+
  '   <td><img id=imgArr src="'+MyCal.color+'_ar0.gif" οnclick="CalOb.chgYear(1)""></td>'+
  '  </tr></table>'+
  ' </div>'+
  ' <div class="d6 cc">'+
  '  <table cellpadding=0 cellspacing=0><tr>'+
  '   <td><img id=imgArr src="'+MyCal.color+'_al0.gif" οnclick="CalOb.chgMonth(-1)"></td>'+
  '   <td width=44 class=cc style="border-width:0 1 0 1;cursor:hand" valign=bottom id=oMonth>'+this.MonthName[this.month]+'</td>'+
  '   <td><img id=imgArr src="'+MyCal.color+'_ar0.gif" οnclick="CalOb.chgMonth(1)"></td>'+
  '  </tr></table>'+
  ' </div>'+
  ' <div class="sel cc scroll" id=selYear style="left:45;width:60" οnclick="CalOb.setDate(this)">';
    for(var i=2001;i<2050;i++)
     str+='<div class="selitem p1">'+i+'</div>';
    str+=
  ' </div>'+
  ' <div class="sel cc" id=selMonth style="left:108;width:48" οnclick="CalOb.setDate(this)">';
    for(var i=0;i<12;i++)
     str+='<div class="selitem p2">'+this.MonthName[i]+'</div>';
    str+=
  ' </div>'+
  '</div>';
  document.write(str);
  CalOb=this;
  oDate.cells[this.date+this.day+7].style.fontWeight="bold";
  oDate.cells[this.date+this.day+7].style.fontSize="12px";
  attchEvent();
  }
 this.drawTable=function(){
  var day=new Date(this.year,this.month,1);
  day=day.getDay();
  this.day=day-1;
  var m=this.year%4==0&&this.year%100||this.year%400==0?1:0;
  m=this.MonthDay[m][this.month]; 
  var r="<table style='table-layout:fixed' cellpadding=0 cellpacing=0 id=oDate οnclick='CalOb.chgDate(this)'>";
  r+="<tr height=3><td width=20></td><td width=23></td><td width=23></td>"+
   "<td width=23></td><td width=20></td><td></td><td></td></tr>";
  for(var i=0,k=0;i<6;i++){
   r+="<tr>";
   for(var j=0;j<7;j++){
    var k=i*7+j+1;
    var ts="<td>&nbsp;</td>"
    if(k>day&&k<=m+day){
     ts="<td";
     if(j==0||j==6)
      ts+=" style='color:red'";
     ts+=">"+(k-day)+"</td>";
     }
    r+=ts;
    }
   r+="</tr>";
   }
  r+="</table>";
  return r;
  }
 function attchEvent(){
  oYear.οnmοuseοver=function(){
   selYear.style.display="block";
   }
  oYear.οnmοuseοut=function(){
   if(event.offsetY<10)
    selYear.style.display="none";
   }
  oMonth.οnmοuseοver=function(){
   selMonth.style.display="block";
   }
  oMonth.οnmοuseοut=function(){
   if(event.offsetY<10)
    selMonth.style.display="none";
   }
  selYear.οnmοuseοut=selOut;
  selYear.οnmοuseοver=selOver;
  selMonth.οnmοuseοut=selOut;
  selMonth.οnmοuseοver=selOver;
  var t=document.all.imgArr;
  for(var i=0;i<t.length;i++){
   t[i].οnmοusedοwn=imgDown;
   t[i].οnmοuseup=imgUp;
   }
  }
 function imgDown(){
  this.src=this.src.replace(/.{5}$/,"1.gif");
  }
 function imgUp(){
  this.src=this.src.replace(/.{5}$/,"0.gif");
  }
 function selOver(){
  var ob=event.srcElement;
  if(ob==this)
   return;
  ob.style.backgroundColor=MyCal.cb;
  }
 function selOut(){
  var ob=event.srcElement;
  if(ob==this)
   this.style.display="none";
  else
   ob.style.backgroundColor="white";
  }
 }
</script>

<script>
var tt=new MyCal();
tt.setColor("blue");//
tt.outPut();

var colortable=["green","blue","yellow","gray"];
var cc=0;
document.body.οnclick=function(){
 if(event.srcElement.tagName!=="BODY")
  return;
 tt.setColor(colortable[cc++]);
 if(cc==colortable.length)
  cc=0;
 }
document.body.title="单击页面空白以更换颜色"
</script>