资讯频道的美国大选专题需要一个像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>&nbsp;</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>&nbsp;</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函数）