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=" ";
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=" ";
}
/*以下为星期相关*/
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!=" ")
{
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=" ";
}
//附加程序
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!=" "?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;
}
}