怎样用javascript 实现一个类似日历的的控件？

以前写的一个  效果非常的简单
<style type="text/css">
<!--
body,td,th {
       font-size: 12px;
}
.a{
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
width:300px;
}
-->
</style>
<script>
var calendar={
monthdays:[31,28,31,30,31,30,31,31,30,31,30,31],initialize: function()
{var current=new Date(); this.year=current.getYear(); this.month=current.getMonth(); this.date=current.getDate(); this.day=current.getDay(); },
isleapyear: function(year){ if (0==year%4&&((year%100!=0)||(year%400==0))) return true;else return false;},
preyear : function (){if(this.year> 999 && this.year <10000) { this.year--; return true;} else false; },
nextyear: function (){if(this.year> 999 && this.year <10000) { this.year++; return true;} else false; },
premonth  : function(){ if(this.month==0)  { if(this.preyear()) this.month=11; else return false; } else this.month--; return true; },
nextmonth : function(){ if(this.month==11) { if(this.nextyear()) this.month=0; else return false; } else this.month++; return true; },
monthday:   function(){ return this.isleapyear(this.year)&&this.month==1?this.monthdays[this.month]+1:this.monthdays[this.month];},
firstday: function() {var today =new Date(this.year,this.month,1);return today.getDay(); }
              }
                       
calendar.initialize(); //里面都是全局变量，初始化一下
                       
function getcalendar(){
var str,html;
var str ="<span style='cursor:hand;' onclick='getpre()' ><<</span>　　　　　　　"+calendar.year+" 年 "+(calendar.month+1)+" 月 "+"　　　　　　　<span style='cursor:hand;' onclick='getnext()' >>></span>"     
html="<div class='a'><table width='300' cellspacing='0' cellpadding='0'><tr height='20' align='center'><td colspan='7'>"+str+"</td></tr><tr height='20'><td align='center' valign='middle'> 日</td><td align='center'>一</td><td align='center'>二</td><td align='center'>三</td><td align='center'>四</td><td align='center'>五</td><td align='center'>六</td></tr><tr height='20'>"
var start=calendar.firstday();  //1号是星期几
var monthdays=calendar.monthday(); //看本月是多少天
var zong =start + monthdays; //循环输出时，好空出start的位置
var day =new Date()
var a =day.getDate()
var b =day.getMonth()
var c =day.getYear()
for(i=1;i<=zong;i++)
{
  if(i<=start)
    {html=html+"<td></td>"}
       else
   {
   var tian = i-start
   if(i%7==0)
   {
          if((tian==a)&&(calendar.month==b)&&(calendar.year==c))
          html=html+"<td align='center' bgcolor='#CC6600'>"+tian+"</td></tr><tr height='20'>"
          else
          html=html+"<td align='center'>"+tian+"</td></tr><tr height='20'>"
   }
   else
   {
          if((tian==a)&&(calendar.month==b)&&(calendar.year==c))
          html=html+"<td align='center' bgcolor='#CC6600'>"+tian+"</td>"
          else
          html=html+"<td align='center'>"+tian+"</td>"
   }
   } 
}
html=html+"</tr></table></div>"
document.getElementById("a").innerHTML=html
}                       function getpre(){
calendar.premonth ();
getcalendar();
}
function getnext(){calendar.nextmonth();
getcalendar();
}
</script>
<input type="button"  value="打开日历" onclick="getcalendar()" />
<br><br><br><br>
<center><span id ="a"></span></center>