javascript动手写日历组件(2)——优化UI和添加交互(by vczero)

一、优化UI

继上一篇，http://www.cnblogs.com/vczero/p/js_ui_1.html。开始优化UI，主要优化的部分有：

(1)增加星期行。(2)字体设置。(3)日期垂直居中。(4)将单元格->底部线条。(5)修改文本的颜色对比。(6)将内部调用的函数加前缀_，如_addHeader()、_addWeekday()。

修改的后基本效果如下图：

整个代码做了小修小改：

 1 var Calendar = function(div){ 2     this.div = document.getElementById(div); 3     this.width = this.div.style.width || 800; //增加两变量 4     this.height = this.div.style.height || (600 - 30); 5 }; 6  7 Calendar.week = ['星期一', '星期二','星期三', '星期四','星期五', '星期六', '星期日']; 8 Calendar.month = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']; 9 10 Calendar.PRototype.showUI = function(date){11     var width = this.width,12         height = this.height,13         cell = {width: (parseInt(width) - 20)/7, height: (parseInt(height) -30 - 20)/5},14         monthArr = this._monthPanel(date);15     this.div.style.paddingLeft = '8px'; 16     this.div.style.border = '2px solid #57ABFF';17     this.div.style.cursor = 'default';18     this.div.style.fontFamily = '微软雅黑';19     this._addHeader(date);20     this._addWeekday();21     for(var i = 0; i < 35; i++){22         var cellDOM = document.createElement('div');23         cellDOM.style.width = cell.width + 'px';24         cellDOM.style.height = cell.height + 'px';25         cellDOM.style.display = 'inline-block';26         cellDOM.style.float = 'left';27         cellDOM.style.cursor = 'pointer';28         cellDOM.style.textAlign = 'center';29         cellDOM.style.lineHeight = cell.height + 'px';30         cellDOM.innerHTML = monthArr[i].getDate();31         //去掉最后一行横线32         if(i < 28){33             cellDOM.style.borderBottom = '1px solid #C8CACC';34         }35 36         this.div.appendChild(cellDOM);37     }38     39 };40 41 Calendar.prototype._addHeader = function(date){42     var header = document.createElement('div');43     header.style.height = '20px';44     header.style.width = this.div.style.width || '800px';45     header.style.textAlign = 'center';46     header.style.fontWeight = 'bold';47     header.innerHTML = date.getFullYear() + '年' + (date.getMonth() + 1) + '月';48     console.log(header);49     this.div.appendChild(header);50 }51 52 //增加星期53 Calendar.prototype._addWeekday = function(){54     for(var i = 0; i < 7; i++){55         var weekday = document.createElement('div');56         weekday.style.width = (parseInt(this.width) - 20)/7 + 'px';57         weekday.style.height = '20px';58         weekday.style.display = 'inline-block';59         weekday.style.float = 'left';60         weekday.style.color = '#BFBFBF';61         weekday.style.fontWeight = 'bold';62         weekday.innerHTML = Calendar.week[i];63         this.div.appendChild(weekday);64     }65 }66 67 Calendar.prototype._monthPanel = function(date){68     //如果传递了Date对象，则按Date对象进行计算月份面板69     //否则，按照当前月份计算面板70     var date = date || new Date(),71         year = date.getFullYear(),72         month = date.getMonth(),73         day = date.getDate(),74         week = date.getDay(),75         currentDays = new Date(year, month + 1, 0).getDate(),76         preDays = new Date(year, month, 0).getDate(),77         firstDay = new Date(year, month, 1),78         firstCell = firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1,79         bottomCell =  35 - currentDays - firstCell;80     //前一个月该显示多少天81     var preMonth = [];82     for(var p = firstCell; p > 0; p--){83         preMonth.push(new Date(year, month - 1, preDays - p + 1));84     }85     //本月86     var currentMonth = [];87     for(var c = 0; c < currentDays; c++){88         currentMonth.push(new Date(year, month, c + 1));89     }90     //下一个月91     var nextMonth = [];92     for(var n = 0; n < bottomCell; n++){93         nextMonth.push(new Date(year, month + 1, n + 1));94     }95 96     preMonth = preMonth.concat(currentMonth, nextMonth);97     return preMonth;98 };

二、增加交互，选中返回日期对象

（1）点击日期，返回日期对象。

要想点击日期，返回日期对象，必须动态的添加事件。因此，需要在每个日期的DIV格子上添加事件，因此，会在创建cellDOM的时候添加事件监听。如下代码和图已经可以根据鼠标点击事件返回时间了。

 1 for(var i = 0; i < 35; i++){ 2         var cellDOM = document.createElement('div'); 3         cellDOM.style.width = cell.width + 'px'; 4         cellDOM.style.height = cell.height + 'px'; 5         cellDOM.style.display = 'inline-block'; 6         cellDOM.style.float = 'left'; 7         cellDOM.style.cursor = 'pointer'; 8         cellDOM.style.textAlign = 'center'; 9         cellDOM.style.lineHeight = cell.height + 'px';10         cellDOM.setAttribute('date',monthArr[i]); //设置日期对象到DOM属性date上11         cellDOM.innerHTML = monthArr[i].getDate();12         //去掉最后一行横线13         if(i < 28){14             cellDOM.style.borderBottom = '1px solid #C8CACC';15         }16 17         cellDOM.addEventListener('click', function(event){18             console.log(this.getAttribute('date')); //通过this获取当前DOM的属性19         });20         this.div.appendChild(cellDOM);21     }

（2）封装事件，提供返回时间的接口

在Calendar的原型上定义个一个函数Calendar.prototype.getDate = null;暴露这个类函数，让开发者重写这个函数即可。

        <script type="text/Javascript">            function showCalendar(){                var c = new Calendar('calendar');                c.getDate = function(event){                    alert(new Date(this.getAttribute('date')));                };                c.showUI(new Date());            }        </script>

（3）根据选择不同的月份，显示不同的日期面板

这时，就需要一个this.date对象，作为实例的属性，保证修改了this.date对象，其他原型函数也很获取到改变后的数值。下面最为重要的就是根据不同月份，重绘日历面板了。修改代码，增加向左，向右的月份控制。

向左（前一个月）的代码：

 1     var _that = this; //获取到this对象 2     leftDiv.addEventListener('click', function(event){ 3         var year = parseInt(_that.date.getFullYear()), 4             month = parseInt(_that.date.getMonth()); 5         if(month === 0){ 6             _that.date = new Date(year - 1, 11, 1); 7         }else{ 8             _that.date = new Date(year, month - 1, 1); 9         }10         _that.showUI();11         12     });

向右（下一个月）的代码控制：

 1 rightDiv.addEventListener('click', function(event){ 2         var year = parseInt(_that.date.getFullYear()), 3             month = parseInt(_that.date.getMonth()); 4         if(month === 11){ 5             _that.date = new Date(year + 1, 0, 1); 6         }else{ 7             _that.date = new Date(year, month + 1, 1); 8         } 9         _that.showUI();10     });

需要修改重绘的控制，以_addHeader()为例，判断DOM节点是否存在，如果存在移除DOM节点，重绘。

    var exist = document.getElementById('vczero_datediv');    if(!!exist){        this.div.removeChild(exist);    }

三、整个代码

整个简易日历已经可以使用了，上效果：

Calendar.js完整代码：

  1 /*  2 +------------------------------  3 @author:vczero  4 @time:2014/8/10  5 @desc:简易日历组件  6 +------------------------------  7 */  8 var Calendar = (function(){  9     var Calendar = function(div, date){ 10         this.div = document.getElementById(div); 11         var w = this.div.style.width || 390; 12         var h = this.div.style.height || (300 - 30); 13         this.width = parseInt(w) >= 360 ? w : 360;  14         this.height = parseInt(h) >= 180 ? h : 180; 15         this.date = date; 16         this.div.style.width = this.width + 'px'; //按默认值设置回去 17         this.div.style.height = this.height + 'px';//按默认值设置回去 18     }; 19  20     Calendar.week = ['星期一', '星期二','星期三', '星期四','星期五', '星期六', '星期日']; 21  22     Calendar.prototype.getDate = null; 23  24     Calendar.prototype.showUI = function(){ 25         var exist = document.getElementById('vczero_celldom_0'); 26         //如果存在节点：移除 27         if(!!exist){ 28             for(var e = 0; e < 35; e++){ 29                 var node = document.getElementById('vczero_celldom_' + e); 30                 this.div.removeChild(node); 31             } 32         } 33  34         var width = this.width, 35