日历插件演示

by lxjwlt

HTML

<div class="calendar">
    <h3 class="calendar__title">April 2014</h3>
    <a href="#" class="calendar__prev-button"></a>
    <a href="#" class="calendar__next-button"></a>
    <ul class="calendar__week-title-block">
        <li class="calendar__week-title">Sun</li>
        <li class="calendar__week-title">Mon</li>
        <li class="calendar__week-title">Tue</li>
        <li class="calendar__week-title">Wed</li>
        <li class="calendar__week-title">Thu</li>
        <li class="calendar__week-title">Fri</li>
        <li class="calendar__week-title">Sat</li>
    </ul>
    <ul class="calendar__day-block"></ul>
</div>

CSS

.calendar {
  width: 270px;
  margin: auto;
  position: relative;
}

.calendar__title {
  padding: 8px;
  font-size: 14px;
  text-align: center;
  border-bottom: 2px solid #e0e0e0;
}

.calendar__prev-button {
  display: block;
  width: 0px;
  height: 0px;
  border-style: dashed;
  border-color: transparent;
  border-width: 6px;
  border-right-color: #686868;
  border-right-style: solid;
  position: absolute;
  left: 0;
  top: 14px;
}

.calendar__next-button {
  display: block;
  width: 0px;
  height: 0px;
  border-style: dashed;
  border-color: transparent;
  border-width: 6px;
  border-left-color: #686868;
  border-left-style: solid;
  position: absolute;
  right: 0;
  top: 14px;
}

.calendar__week-title {
    font-size: 12px;
}

.calendar__week-title, .calendar__day {
  width: 13%;
  float: left;
  color: #868686;
  margin-left: 1.5%;
  text-align: center;
}

.calendar__week-title:first-child, .calendar__day:first-child {
  margin-left: 0;
}

.calendar__day {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 1.5%;
  border: 1px solid #e0e0e0;
  font-size: 18px;
  text-align: center;
  color: #868686;
  font-weight: bold;
}

.calendar__day:nth-child(7n+1) {
  margin-left: 0;
}

.calendar__day:nth-child(7n) {
  background-color: #00a2d1;
}

.calendar__day--first {
  color: #000;
}

.calendar__day--first ~ .calendar__day {
  color: #000;
}

.calendar__day--last ~ .calendar__day {
  color: #868686;
}

JavaScript

$.fn.createCalendar = function () {
    
    // 返回一个对象，包含：
    // - 日期数组
    // - 该月第一天 在数组中的索引值
    // - 该月最后一天 在数组中的索引值
    var getMonthInfo = function (year, month) {
        
        var arr = [],
            
            // 该月份的天数
            totalDays = new Date(year, month + 1, 0).getDate(),
            
            // 前一个月份的天数
            lastTotalDays = new Date(year, month, 0).getDate(),
            
            // 该月1日的星期
            weekDay = new Date(year, month, 1).getDay(),
            
            len = 42,
            i, num;
        
        if (weekDay === 0) weekDay = 7;
        
        // 填充前一个月的日期
        for (i = weekDay - 1, num = lastTotalDays; i >= 0; i--, num--) {
            arr[i] = num;
        }
        
        // 填充该月及下一月的日期
        for (i = weekDay, num = 1; i < 42; i++, num++) {
            arr[i] = num > totalDays ? num - totalDays : num;
        }
        
        return {
            dayArr: arr,
            firstDay: weekDay,
            lastDay: weekDay + totalDays - 1
        };
        
    };
    
    var getDayHTML = function (arr, first, last) {
        var str = '',
            elem, i, len;
        
        for (i = 0, len = arr.length; i < len; i++) {
            str += '<li>' + arr[i] + '</li>';
        }
        
        elem = $(str);
        
        // 分配类名
        elem.addClass('calendar__day')
        .eq(first)
        .addClass('calendar__day--first')
        .end()
        .eq(last)
        .addClass('calendar__day--last');
        
        
        return elem;
    };
    
    return this.each(function () {
        var $me = $(this),
            currentTime = new Date(),
            currentYear = currentTime.getFullYear(),
            currentMonth = currentTime.getMonth();
        
        $me
        // 绘制
        .on('draw.calendar', function (e, year, month) {
            var $this = $(this),
                obj = getMonthInfo(year, month),
                str = getDayHTML(obj.dayArr, obj.firstDay,...