简单的Javascript日历
资讯频道的美国大选专题需要一个像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