潘魏增

资讯频道的美国大选专题需要一个像CNN大选专题那样的选举日历功能。看了CNN的实现方式，觉得它的代码有点复杂，于是就自己写了一个简单通用的Javascript日历。主要思路是：
1.每一个表示日期的TD标签分配一个日期字符串的id，该字符串记录了TD标签所表示的日期；
2.当点击表示日期的TD标签后，在this.cache.selectedDates中保存该日期，并执行callback函数对日期进行处理；
3.每一个日历实例由this._MODULE_ID_唯一标识。
对应的主要函数分别是render、selectDate和setMoudleId。

//根据年份和日期呈现日历
render:function(year,month){
    this.preRender(year,month);
    var date = new Date(year,month,1),dateString = '';
    var dayCount = this.dayArray[month];
    var preDayCount = date.getDay(),preDayCounter = preDayCount;
    var afterDayCounter = (this.dayArray[month]+preDayCount)%7 == 0 ?
            0 :
            7-((this.dayArray[month]+preDayCount)%7);
    var html = this.renderHeader()+'<div id="'
             +this.properties.contentClass+this._MODULE_ID_+'" class="'
             +this.properties.contentClass+'"><table>';
    html += this.renderWeekdays();
    html += '<tr>';

    //先补齐本月日期开始前的TD数
    while(preDayCounter-- > 0) html += '<td> </td>';

    for(var i = 1; i <= dayCount; i++ ){
        date = new Date(year,month,i);
        dateString = this.dateToString(date);
        //保存当前月的日期
        this.cache.currentDateStrings.push(dateString);
        if(this.isSelectedDay(date) && this.isToday(date))
            html += '<td class="'
                 +this.properties.isDoubleDayClass+'" id="'
                 +dateString+this._MODULE_ID_+'">'+i+'</td>';
        else if(this.isSelectedDay(date))
            html += '<td class="'
                 +this.properties.isSelectedClass+'" id="'
                 +dateString+this._MODULE_ID_+'">'+i+'</td>';
        else if(this.isToday(date))
            html += '<td class="'
                 +this.properties.isTodayClass+'" id="'
                 +dateString+this._MODULE_ID_+'">'+i+'</td>';
        else
            html += '<td class="'
                 +this.properties.isDateClass+'" id="'
                 +dateString+this._MODULE_ID_+'">'+i+'</td>';
        //如果满7个TD则换行
        if((i+preDayCount) % 7 == 0) html += '</tr><tr>';
    }

    //补齐本月日期结束后的TD数
    while(afterDayCounter-- > 0) html += '<td> </td>';

    html += '</tr>';
    html += '</table></div>';

    $(this.properties.holder).innerHTML = html;
    this.attachEvent();
}
//根据TD和它的id选取日期
//首先设置该TD的className改变其外观，然后在this.cache.selectedDates中增加该日期.
selectDate:function(element,elementId){
	if(this.properties.isMultipleSelect){
		if(this.cache.selectedDates[elementId] == undefined){
			element.className = this.properties.isSelectedClass;
			this.cache.selectedDates[elementId] = true;
		}
		else
			this.deleteSelect(element,elementId);
	}
	else {
		for(var i in this.cache.selectedDates)
			this.deleteSelect($(i+this._MODULE_ID_),i);
		element.className = this.properties.isSelectedClass;
		this.cache.selectedDates[elementId] = true;
	}
	if(this.properties.callback!=null
	   && this.isFunction(this.properties.callback)){
		this.properties.callback(this);
	}
},
//设置实例的唯一标识this._MODULE_ID_
setMoudleId:function(){
	var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
	for(var i = 0 ; i < 32; i++)
		this._MODULE_ID_ += chars.charAt(Math.floor(Math.random()*62));
}

如果要基于这个例子来修改的话
1.如果想只改改日历的外观，修改相关的css部分即可；
2.如果想应用日历输出数据，还得写一个callback函数处理选取后的数据；
2.如果想增加功能，可以分别在this.cache和this.properties里面增加你想要的数据和参数，在calendar.prototype中修改或者增加相关的函数。

在线浏览地址（第二个样式和PageFlakes日历控件外观差不多，并附有一个简单的callback函数）：http://panweizeng.com/others/example/calendar-simple/
完整的Javascript代码：http://panweizeng.com/others/example/calendar-simple/calendar-common.js