• 设置日历的大小
  */
  .calendar{
  width: 240px;
  height: 400px;
  display: block;
  }

/**

• 设置日历顶部盒子
  */
  .calendar .calendar-title-Box{
  position: relative;
  width: 100%;
  height: 36px;
  line-height: 36px;
  text-align:center;
  border-bottom: 1px solid #ddd;
  }

/**

• 设置上个月的按钮图标
  */
  .calendar .prev-month {
  position: absolute;
  top: 12px;
  left: 0px;
  display: inline-block;
  width: 0px;
  height: 0px;
  border-left: 0px;
  border-top: 6px solid transparent;
  border-right: 8px solid #999;
  border-bottom: 6px solid transparent;
  cursor: pointer;
  }

/**

• 设置下个月的按钮图标
  */
  .calendar .next-month {
  position: absolute;
  top: 12px;
  right: 0px;
  display: inline-block;
  width: 0px;
  height: 0px;
  border-right: 0px;
  border-top: 6px solid transparent;
  border-left: 8px solid #999;
  border-bottom: 6px solid transparent;
  cursor: pointer;
  }

/ 设置日历表格样式 /
.calendar-table{
width: 100%;
border-collapse: collapse;
text-align:center;
}

/ 表格行高 /
.calendar-table tr{
height: 30px;
line-height: 30px;
}

/ 当前天 颜色特殊显示 /
.currentDay {
color: red;
}

/ 本月 文字颜色 /
.currentMonth {
color: #999;
}

/ 其他月颜色 /
.otherMonth{
color: #ede;
}

// 设置calendar div中的html部分
renderHtml();
// 表格中显示日期
showCalendarData();
// 绑定事件
bindEvent();

/**

• 渲染html结构
  */
  function renderHtml() {
  var calendar = document.getElementById("calendar");
  var titleBox = document.createElement("div"); // 标题盒子 设置上一月 下一月 标题
  var bodyBox = document.createElement("div"); // 表格区 显示数据

// 设置<a href="/tag/biaoti/" target="_blank" class="keywords">标题</a>盒子中的html
title<a href="/tag/Box/" target="_blank" class="keywords">Box</a>.className = 'calendar-title-<a href="/tag/Box/" target="_blank" class="keywords">Box</a>';
title<a href="/tag/Box/" target="_blank" class="keywords">Box</a>.innerHTML = "<span class='prev-month' id='prevMonth'></span>" +
  "<span class='calendar-title' id='calendarTitle'></span>" +
  "<span id='nextMonth' class='next-month'></span>";
calendar.appendChild(title<a href="/tag/Box/" target="_blank" class="keywords">Box</a>);    // <a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>到calendar div中

// 设置表格区的html结构
body<a href="/tag/Box/" target="_blank" class="keywords">Box</a>.className = 'calendar-body-<a href="/tag/Box/" target="_blank" class="keywords">Box</a>';
var _headHtml = "<tr&gt;" + 
          "<th>日</th>" +
          "<th>一</th>" +
          "<th>二</th>" +
          "<th>三</th>" +
          "<th>四</th>" +
          "<th>五</th>" +
          "<th>六</th>" +
        "</tr&gt;";
var _bodyHtml = "";

// 一个月最多31天，所以一个月最多占6行表格
for(var i = 0; i < 6; i++) {  
  _bodyHtml += "<tr&gt;" +
          "<td&gt;</td&gt;" +
          "<td&gt;</td&gt;" +
          "<td&gt;</td&gt;" +
          "<td&gt;</td&gt;" +
          "<td&gt;</td&gt;" +
          "<td&gt;</td&gt;" +
          "<td&gt;</td&gt;" +
        "</tr&gt;";
}
body<a href="/tag/Box/" target="_blank" class="keywords">Box</a>.innerHTML = "<table id='calendarTable' class='calendar-table'>" +
          _headHtml + _bodyHtml +
          "</table&gt;";
// <a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>到calendar div中
calendar.appendChild(body<a href="/tag/Box/" target="_blank" class="keywords">Box</a>);

}

/**

• 表格中显示数据，并设置类名
  */
  function showCalendarData() {
  var _year = dateObj.getDate().getFullYear();
  var _month = dateObj.getDate().getMonth() + 1;
  var _dateStr = getDateStr(dateObj.getDate());

// 设<a href="/tag/zhiding/" target="_blank" class="keywords">置顶</a>部<a href="/tag/biaoti/" target="_blank" class="keywords">标题</a>栏中的 年、月信息
var calendarTitle = document.getElementById("calendarTitle");
var titleStr = _dateStr.substr(0,4) + "年" + _dateStr.substr(4,2) + "月";
calendarTitle.innerText = titleStr;

// 设置表格中的日期数据
var _table = document.getElementById("calendarTable");
var _tds = _table.getElementsByTagName("td");
var _firstDay = new Date(_year,_month - 1,1);  // 当前月第一天
for(var i = 0; i < _tds.length; i++) {
  var _thisDay = new Date(_year,i + 1 - _firstDay.getDay());
  var _thisDayStr = getDateStr(_thisDay);
  _tds[i].innerText = _thisDay.getDate();
  //_tds[i].data = _thisDayStr;
  _tds[i].setAttribute('data',_thisDayStr);
  if(_thisDayStr == getDateStr(new Date())) {    // 当前天
    _tds[i].className = 'currentDay';
  }else if(_thisDayStr.substr(0,6) == getDateStr(_firstDay).substr(0,6)) {
    _tds[i].className = 'currentMonth';  // 当前月
  }else {    // 其他月
    _tds[i].className = 'otherMonth';
  }
}

}

/**

• 绑定上个月下个月事件
  */
  function bindEvent() {
  var prevMonth = document.getElementById("prevMonth");
  var nextMonth = document.getElementById("nextMonth");
  addEvent(prevMonth,'click',toPrevMonth);
  addEvent(nextMonth,toNextMonth);
  }

/**

• 绑定事件
  */
  function addEvent(dom,eType,func) {
  if(dom.addEventListener) { // DOM 2.0
  dom.addEventListener(eType,function(e){
  func(e);
  });
  } else if(dom.attachEvent){ // IE5+
  dom.attachEvent('on' + eType,function(e){
  func(e);
  });
  } else { // DOM 0
  dom['on' + eType] = function(e) {
  func(e);
  }
  }
  }

/**

• 点击上个月图标触发
  */
  function toPrevMonth() {
  var date = dateObj.getDate();
  dateObj.setDate(new Date(date.getFullYear(),date.getMonth() - 1,1));
  showCalendarData();
  }

/**

• 点击下个月图标触发
  */
  function toNextMonth() {
  var date = dateObj.getDate();
  dateObj.setDate(new Date(date.getFullYear(),date.getMonth() + 1,1));
  showCalendarData();
  }

/**

• 日期转化为字符串， 4位年+2位月+2位日
  */
  function getDateStr(date) {
  var _year = date.getFullYear();
  var _month = date.getMonth() + 1; // 月从0开始计数
  var _d = date.getDate();

_month = (_month > 9) ? ("" + _month) : ("0" + _month);
_d = (_d > 9) ? ("" + _d) : ("0" + _d);
return _year + _month + _d;

}
})();