一个js写的日历（代码部分网摘）

　　<script type="text/javascript">

　　var $ = function (id) {

　　return "string" == typeof id ? document.getElementById(id) : 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.Container = $(container);//容器(table结构)

　　this.Days = [];//日期对象列表

　　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;

　　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;

　　//重新画日历

　　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 frag = document.createDocumentFragment();

　　while(arr.length){

　　//每个星期插入一个tr

　　var row = document.createElement("tr");

　　//每个星期有7天

　　for(var i = 1; i <= 7; i++){

　　var cell = document.createElement("td"); cell.innerHTML = " ";

　　if(arr.length){

　　var d = arr.shift();

　　if(d){

　　cell.innerHTML = d;

　　this.Days[d] = cell;

　　var on = new Date(this.Year, this.Month - 1, d);

　　//判断是否今日

　　this.IsSame(on, new Date()) && this.onToday(cell);

　　//判断是否选择日期

　　this.SelectDay && this.IsSame(on, this.SelectDay) && this.onSelectDay(cell);

　　}

　　}

　　row.appendChild(cell);

　　}

　　frag.appendChild(row);

　　}

　　//先清空内容再插入(ie的table不能用innerHTML)

　　while(this.Container.hasChildNodes()){ this.Container.removeChild(this.Container.firstChild); }

　　this.Container.appendChild(frag);

　　//附加程序

　　this.onFinish();

　　},

　　//判断是否同一日

　　IsSame: function(d1, d2) {

　　return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());

　　}

　　}

　　</script>

　　<style type="text/css">

　　.Calendar {

　　font-family:Verdana;

　　font-size:12px;

　　background-color:#e0ecf9;

　　text-align:center;

　　width:400px;

　　height:180px;

　　padding:10px;

　　line-height:1.5em;

　　}

　　.Calendar a{

　　color:#1e5494;

　　}

　　.Calendar table{

　　width:100%;

　　border:0;

　　}

　　.Calendar table thead{color:#acacac;}

　　.Calendar table td {

　　font-size: 11px;

　　padding:1px;

　　}

　　#idCalendarPre{

　　cursor:pointer;

　　float:left;

　　padding-right:5px;

　　}

　　#idCalendarNext{

　　cursor:pointer;

　　float:right;

　　padding-right:5px;

　　}

　　#idCalendar td.onToday {

　　font-weight:bold;

　　color:#C60;

　　}

　　#idCalendar td.onSelect {

　　font-weight:bold;

　　}

　　#buttonposition{

　　margin-left: 10%;

　　}

　　</style>

　　<div class="Calendar">

　　<div id="idCalendarPre"><<</div>

　　<div id="idCalendarNext">>></div>

　　<span id="idCalendarYear"></span>年 <span id="idCalendarMonth"></span>月

　　<table cellspacing="0">

　　<thead>

　　<tr>

　　<td>日</td>

　　<td>一</td>

　　<td>二</td>

　　<td>三</td>

　　<td>四</td>

　　<td>五</td>

　　<td>六</td>

　　</tr>

　　</thead>

　　<tbody id="idCalendar">

　　</tbody>

　　</table>

　　</div>

　　<div id="buttonposition" ><!-- 通过id获取样式 -->

　　<input id="idCalendarPreYear" type="button" class="bt" value="上一年" />

　　<input id="idCalendarNow" type="button" class="bt" value="当前月" />

　　<input id="idCalendarNextYear" type="button" class="bt" value="下一年" />

　　</div>

　　<script language="JavaScript">

　　var cale = new Calendar("idCalendar", {

　　onToday: function(o){ o.className = "onToday"; },

　　onFinish: function(){

　　$("idCalendarYear").innerHTML = this.Year; $("idCalendarMonth").innerHTML = this.Month;

　　}

　　});

　　$("idCalendarPre").onclick = function(){ cale.PreMonth(); }

　　$("idCalendarNext").onclick = function(){ cale.NextMonth(); }

　　$("idCalendarPreYear").onclick = function(){ cale.PreYear(); }

　　$("idCalendarNextYear").onclick = function(){ cale.NextYear(); }

　　$("idCalendarNow").onclick = function(){ cale.NowMonth(); }

　　</script>

　　</div>