js做日历控件，类似博客的（动态填写日期）

页面：

<table class="style100" border="0" id="table1" cellspacing="0" cellpadding="0">
            <tr>
                <td class="style1010_1" style="color:#FFFF00; height:10%;">周次</td>
                <td class="style1010_1" style="color:#00FFFF; height:10%;">日</td>
                <td class="style1010_1">一</td>
                <td class="style1010_1">二</td>
                <td class="style1010_1">三</td>
                <td class="style1010_1">四</td>
                <td class="style1010_1">五</td>
                <td class="style1010_1" style="color:#00FF00;">六</td>
               </tr>
               <tr>
                   <td id="week1" class="style1010_2_locke" style="color:#FFFF00; height:10%;"></td>
                <td id="date1" class="style1010_2_locke" style="color:#00FFFF; height:10%;"></td>
                <td id="date2" class="style1010_2_locke"></td>
                <td id="date3" class="style1010_2_locke"></td>
                <td id="date4" class="style1010_2_locke"></td>
                <td id="date5" class="style1010_2_locke"></td>
                <td id="date6" class="style1010_2_locke"></td>
                <td id="date7" class="style1010_2_locke" style="color:#00FF00;"></td>
               </tr>
               <tr>
                   <td id="week2" class="style1010_locke" style="color:#FFFF00; height:10%;"></td>
                <td id="date8" class="style1010_locke" style="color:#00FFFF; height:10%;"></td>
                <td id="date9" class="style1010_locke"></td>
                <td id="date10" class="style1010_locke"></td>
                <td id="date11" class="style1010_locke"></td>
                <td id="date12" class="style1010_locke"></td>
                <td id="date13" class="style1010_locke"></td>
                <td id="date14" class="style1010_locke" style="color:#00FF00;"></td>
               </tr>
               <tr>
                   <td id="week3" class="style1010_2_locke" style="color:#FFFF00; height:10%;"></td>
                <td id="date15" class="style1010_2_locke" style="color:#00FFFF; height:10%;"></td>
                <td id="date16" class="style1010_2_locke"></td>
                <td id="date17" class="style1010_2_locke"></td>
                <td id="date18" class="style1010_2_locke"></td>
                <td id="date19" class="style1010_2_locke"></td>
                <td id="date20" class="style1010_2_locke"></td>
                <td id="date21" class="style1010_2_locke" style="color:#00FF00;"></td>
               </tr>
               <tr>
                   <td id="week4" class="style1010_locke" style="color:#FFFF00; height:10%;"></td>
                <td id="date22" class="style1010_locke" style="color:#00FFFF; height:10%;"></td>
                <td id="date23" class="style1010_locke"></td>
                <td id="date24" class="style1010_locke"></td>
                <td id="date25" class="style1010_locke"></td>
                <td id="date26" class="style1010_locke"></td>
                <td id="date27" class="style1010_locke"></td>
                <td id="date28" class="style1010_locke" style="color:#00FF00;"></td>
               </tr>
               <tr>
                   <td id="week5" class="style1010_2_locke" style="color:#FFFF00; height:10%;"></td>
                <td id="date29" class="style1010_2_locke" style="color:#00FFFF; height:10%;"></td>
                <td id="date30" class="style1010_2_locke"></td>
                <td id="date31" class="style1010_2_locke"></td>
                <td id="date32" class="style1010_2_locke"></td>
                <td id="date33" class="style1010_2_locke"></td>
                <td id="date34" class="style1010_2_locke"></td>
                <td id="date35" class="style1010_2_locke" style="color:#00FF00;"></td>
               </tr>
               <tr>
                   <td id="week6" class="style1010_locke" style="color:#FFFF00; height:10%;"></td>
                <td id="date36" class="style1010_locke" style="color:#00FFFF; height:10%;"></td>
                <td id="date37" class="style1010_locke"></td>
                <td id="date38" class="style1010_locke"></td>
                <td id="date39" class="style1010_locke"></td>
                <td id="date40" class="style1010_locke"></td>
                <td id="date41" class="style1010_locke"></td>
                <td id="date42" class="style1010_locke" style="color:#00FF00;"></td>
               </tr>
               <tr style="background-image: url(images/bg20.png);">
                <td style="width:70%; height:10%;text-align:center;" colspan="8">
                                            年度计划 季度计划　<span id="PreMonth" style="text-decoration:underline; ">上月计划</span>  <span id="NextMonth" style="text-decoration:underline; ">下月计划</span>
                    　 1　2　3　4　5　6　7　8　9　10　11　12　</td>
               </tr>
               <tr>
                <td style="width:70%; height:10%;text-align:center;" colspan="8">
                <p style="text-align: right">备用栏　如返回等按钮</p></td>
               </tr>
              </table>

script代码：

<script type="text/javascript">
//    var $ = function (id) {
//        return "string" == typeof id ? document.getElementById(id) : id;
//    };
    function GetElement(id)
    {
        return document.getElementById(id);
    }
    var Class = {
      create: function() {
        return function() {
          this.initialize.apply(this, arguments);
        }
      }
    };
    var Extend = function(destination, source) {
        for (var property in source) {
            destination[property] = source[property];
        }
        return destination;
    };
    var Calendar = Class.create();
    Calendar.prototype = {
      initialize: function(container,options) {
     this.Days = [];//日期对象列表
     this.Weeks = [];//周对象列表
     this.SetOptions(options);
     this.Year = this.options.Year || new Date().getFullYear();
     this.Month = this.options.Month || new Date().getMonth() + 1;
     this.SelectDay = this.options.SelectDay ? new Date(this.options.SelectDay) : null;
     this.onSelectDay = this.options.onSelectDay;
     this.onToday = this.options.onToday;
     this.onFinish = this.options.onFinish; 
     //GetElement("ThisDay").innerHTML="今日计划 "+new Date().toLocaleDateString();//自己定义的
     GetElement("ThisMonth").innerHTML="本月计划 "+this.Year+"年"+this.Month+"月";//自己定义的
     this.Draw();
      },
      //设置默认属性
      SetOptions: function(options) {
     this.options = {//默认值
      Year:   0,//显示年
      Month:   0,//显示月
      SelectDay:  null,//选择日期
      onSelectDay: function(){},//在选择日期触发
      onToday:  function(){},//在当天日期触发
      onFinish:  function(){}//日历画完后触发
     };
     Extend(this.options, options || {});
      },
      //当前月
      NowMonth: function() {
     this.PreDraw(new Date());
      },
      //上一月
      PreMonth: function() {
     this.PreDraw(new Date(this.Year, this.Month - 2, 1));
      },
      //下一月
      NextMonth: function() {
     this.PreDraw(new Date(this.Year, this.Month, 1));
      },
      //上一年
      PreYear: function() {
     this.PreDraw(new Date(this.Year - 1, this.Month - 1, 1));
      },
      //下一年
      NextYear: function() {
     this.PreDraw(new Date(this.Year + 1, this.Month - 1, 1));
      },
      //根据日期画日历
      PreDraw: function(date) {
     //再设置属性
     this.Year = date.getFullYear(); this.Month = date.getMonth() + 1;
     //重新画日历
     if(this.Year==new Date().getFullYear() && this.Month==new Date().getMonth()+1){
     GetElement("ThisMonth").innerHTML="本月计划 "+this.Year+"年"+this.Month+"月";
     }
     else{
     GetElement("ThisMonth").innerHTML="选中月计划 "+this.Year+"年"+this.Month+"月";
     }
     this.Draw();
      },
      //画日历
      Draw: function() {
     //用来保存日期列表
     var arr = [];
     //用当月第一天在一周中的日期值作为当月离第一天的天数
     for(var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++){ arr.push(0); }
     //用当月最后一天在一个月中的日期值作为当月的天数
     for(var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++){ arr.push(i); }
     /*以下为日期相关*/
     //清空原来的日期对象列表
     this.Days = [];
     var day=1;
     while(arr.length){
      //locke加的
      var d = arr.shift();
      if(d){
      //把日期数字写到td中
      GetElement("date"+day).innerHTML=d;
      //下面是切换td的class
      if(GetElement("date"+day).className=="style1010_locke")
          GetElement("date"+day).className="style1010";
      else if(GetElement("date"+day).className=="style1010_2_locke")
          GetElement("date"+day).className="style1010_2";
      this.Days[d]=GetElement("date"+day);
      }
      else{
      GetElement("date"+day).innerHTML="&nbsp;";
      if(GetElement("date"+day).className=="style1010")
          GetElement("date"+day).className="style1010_locke";
      else if(GetElement("date"+day).className=="style1010_2")
          GetElement("date"+day).className="style1010_2_locke";
      }
      day=day+1;
     }
     for(var i=day;i<38;i++)
     {
         if(GetElement("date"+i).className=="style1010")
          GetElement("date"+i).className="style1010_locke";
      else if(GetElement("date"+i).className=="style1010_2")
          GetElement("date"+i).className="style1010_2_locke";
         
         GetElement("date"+i).innerHTML="&nbsp;";
     }
      /*以下为星期相关*/
     this.Weeks = [];
     var weekStart=getYearWeek(this.Year,this.Month,"1");
     for( var j=1;j<6;j++)
     { 
         if(GetElement("week"+j).className=="style1010_locke")
          GetElement("week"+j).className="style1010";
      else if(GetElement("week"+j).className=="style1010_2_locke")
          GetElement("week"+j).className="style1010_2";
                  
         GetElement("week"+j).innerHTML=weekStart + j - 1;
         this.Weeks[j]=GetElement("week"+j);
     }
    
     if(GetElement("date36").innerHTML!="&nbsp;")
     {  
         if(GetElement("week6").className=="style1010_locke")
          GetElement("week6").className="style1010";
      else if(GetElement("week6").className=="style1010_2_locke")
          GetElement("week6").className="style1010_2";
         
         GetElement("week6").innerHTML=weekStart + 5;
         this.Weeks[6]=GetElement("week"+6);
     }
     else
     {
         if(GetElement("week6").className=="style1010")
          GetElement("week6").className="style1010_locke";
      else if(GetElement("week6").className=="style1010_2")
          GetElement("week6").className="style1010_2_locke";
         
         GetElement("week6").innerHTML="&nbsp";
     }
     //附加程序
     this.onFinish();
      }
    };
    </script>

调用（页面加载后，放在</body>前，</form>后）：

var cale = new Calendar("table1",{
    SelectDay: new Date().setDate(new Date(this.Year, this.Month, 0).getDate()),
    onSelectDay: function(o){ o.className = "onSelect"; },
    onToday: function(o){ o.className = "onToday"; },
    onFinish: function(){
        var flag=JudgDay(this.Year,this.Month,new Date(this.Year, this.Month, 0).getDate());
        if(flag.length>0 && flag[0]!=NaN)
        {
            for(var i = 0, len = flag.length; i < len; i++){
                this.Days[flag[i]].innerHTML = "<a href='javascript:void(0);' onclick=\"setDay('"+this.Year+"/"+this.Month+"/"+flag[i]+"');return false;\">" + flag[i] + "</a>";
            }
            flag=[];
        }
        //周链接
        for(var j=1,len=GetElement("week6").innerHTML!="&nbsp;"?7:6;j<len;j++)
        {
            var isWeekLink=locke.isWeekLink(this.Weeks[j].innerHTML).value;
            if(isWeekLink=="true"){
                this.Weeks[j].innerHTML = "<a style=\"color:#FFFF00; text-decoration:underline;\" href='javascript:void(0);' onclick=\"setWeek('"+this.Weeks[j].innerHTML+"');return false;\">" + this.Weeks[j].innerHTML + "</a>";
            }
        }
    }
    });
    GetElement("PreMonth").onclick = function(){ cale.PreMonth(); } //其中PreMonth为一个html空间的ID
    GetElement("NextMonth").onclick = function(){ cale.NextMonth(); }

 

附上跳转函数：

//选中某天，相应跳转
    function setDay(selected_date)
    {
        if(selected_date){
        document.all.DayPlanArea.src="DayPlan.aspx?dateS="+selected_date;
        }
    }
    //选中某周，相应跳转
    function setWeek(selected_week)
    {
        if(selected_week){
        var year=parseInt(new Date().getFullYear());
        var weekS=parseInt(selected_week);
        selected_week=getXDate(year,weekS,1);
        selected_week=changeTime(selected_week);
        document.all.DayPlanArea.src="WeekPlan.aspx?dateS="+selected_week+"&weekS="+weekS;
        }
    }