SimpleCalendar日曆插件改版

時間 2019-11-18
標籤 simplecalendar 日曆插件改版简体版
原文原文鏈接
先附上一張貨真價實的效果圖：node
以上部分代碼，爲了適應我司項目的需求，原來插件源碼大改（由於項目中下拉框用了select2，因此原來插件的下拉框就有問題了，在加上原來插件自己就有點問題，特別是農曆、節氣....），具體代碼不作闡述，若有相似需求，請私信。主要腳本代碼以下：數組
'use strict';

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var LunarHelp = function () {
  function LunarHelp(year, month, day) {
    _classCallCheck(this, LunarHelp);

    this.lunarInfo = new Array(0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, 0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, 0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, 0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, 0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, 0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5d0, 0x14573, 0x052d0, 0x0a9a8, 0x0e950, 0x06aa0, 0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, 0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b5a0, 0x195a6, 0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, 0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0, 0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, 0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, 0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, 0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0);

    this.nStr1 = new Array('日', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十');
    this.nStr2 = new Array('初', '十', '廿', '三');

    var date = new Date(parseInt(year), parseInt(month)-1, parseInt(day));

    var i,
        leap = 0,
        temp = 0; //天數
    var baseDate = new Date(1900, 0, 31);
    var offset = (date - baseDate) / 86400000;

    //計算年數
    for (i = 1900; i < 2050 && offset> 0; i++) {
      temp = this.lYearDays(i);
      offset -= temp;
    }
    if(offset<0) {
        offset += temp;
        i--;
     }

    this.year = i;
    leap = this.leapMonth(i); //閏哪一個月
    this.isLeap = 0; //0 不是 1是 2是而且計算完成

    //計算月數
    for (i = 1; i < 13 && offset > 0; i++) {
      //閏月
      if (leap > 0 && i == leap + 1 && this.isLeap == 0) {
        --i;
        this.isLeap = 1;
        temp = this.leapDays(this.year);
      } else {
        temp = this.monthDays(this.year, i);
      }

      //解除閏月
      if (this.isLeap == 1 && i == leap + 1) this.isLeap = 2;

      offset -= temp;
    }

    //若是剛好減完了，不是閏月的話月數減1
    if (offset == 0 && leap > 0 && i == leap + 1) if (this.isLeap) {
      this.isLeap = 0;
    } else {
      this.isLeap = 1;
      --i;
    }

    if (offset < 0) {
      offset += temp;
      --i;
    }
    this.month = i;
    //最後剩餘的就是日期
    this.day = offset + 1;
  }

  // 獲取y年的總天數


  _createClass(LunarHelp, [{
    key: 'lYearDays',
    value: function lYearDays(year) {
      var i,
          sum = 348;
      for (i = 0x8000; i > 0x8; i >>= 1) {
        sum += this.lunarInfo[year - 1900] & i ? 1 : 0;
      }return sum + this.leapDays(year); //最後在加上可能有的閏年的閏月
    }

    //獲取閏年閏月的天數 閏大月仍是小月

  }, {
    key: 'leapDays',
    value: function leapDays(year) {
      if (this.leapMonth(year)) return this.lunarInfo[year - 1900] & 0x10000 ? 30 : 29;else return 0;
    }

    //獲取閏年閏哪一個月1-12 ,沒閏傳回 0

  }, {
    key: 'leapMonth',
    value: function leapMonth(year) {
      return this.lunarInfo[year - 1900] & 0xf;
    }

    //獲取y年m月的總天數 正常月

  }, {
    key: 'monthDays',
    value: function monthDays(year, month) {
      return this.lunarInfo[year - 1900] & 0x10000 >> month ? 30 : 29;
    }

    //中文日期

  }, {
    key: 'cDay',
    value: function cDay(d) {
      var s;

      switch (d) {
        case 10:
          s = '初十';
          break;
        case 20:
          s = '二十';
          break;
          break;
        case 30:
          s = '三十';
          break;
          break;
        default:
          s = this.nStr2[Math.floor(d / 10)];
          s += this.nStr1[d % 10];
      }
      return s;
    }
    //中文月份

  }, {
    key: 'cMonth',
    value: function cMonth(m) {
      var s;

      switch (m) {
        case 1:
          s = '正月';
          break;
        case 2:
          s = '二月';
          break;
        case 3:
          s = '三月';
          break;
        case 4:
          s = '四月';
          break;
        case 5:
          s = '五月';
          break;
        case 6:
          s = '六月';
          break;
        case 7:
          s = '七月';
          break;
        case 8:
          s = '八月';
          break;
        case 9:
          s = '九月';
          break;
        case 10:
          s = '十月';
          break;
        case 11:
          s = '十一月';
          break;
        case 12:
          s = '十二月';
          break;
        default:
          break;
      }
      return s;
    }

    //得到陰曆日期 字符串

  }, {
    key: 'getLunarDay',
    value: function getLunarDay() {
      return cMonth(this.month) + cDay(this.day);
    }
    //得到陰曆日期某一天的中文

  }, {
    key: 'getLunarDayName',
    value: function getLunarDayName() {
      if (this.day == 1){ 
          return (this.isLeap == 1?'閏':'') + this.cMonth(this.month)/*+(this.monthDays(this.year,this.month) == 29?'小':'大')*/;
      };
      return this.cDay(this.day);
    }
    //獲取陰曆日期的數字

  }, {
    key: 'getLunarDayNum',
    value: function getLunarDayNum() {
      return {
        day: this.day,
        month: this.month
      };
    }
  }]);

  return LunarHelp;
}();

var SimpleCalendar = function () {
  //構造函數

  function SimpleCalendar(query, options) {
    _classCallCheck(this, SimpleCalendar);

    //默認配置
    this._defaultOptions = {
      width: '400px',
      height: '300px',
      language: 'CH', //語言
      showLunarCalendar: true, //陰曆
      showHoliday: true, //休假
      showFestival: true, //節日
      showLunarFestival: true, //農曆節日
      showSolarTerm: true, //節氣
      showMark: true, //標記
      onSelect: function onSelect() {},
      timeRange: {
        startYear: 1901,
        endYear: 2049
      },
      timeZone: "", //時區
      mark: {
        '2017-9-3': '開學'
      },
      theme: {
        changeAble: false,
        weeks: {
          backgroundColor: '#FBEC9C',
          fontColor: '#4A4A4A',
          fontSize: '16px'
        },
        days: {
          backgroundColor: '#ffffff',
          fontColor: '#565555',
          fontSize: '12px'
        },
        todaycolor: 'orange',
        activeSelectColor: 'orange',
        invalidDays: '#C1C0C0'
      }
    };

    //容器
    this.container = document.querySelector(query);

    this._defaultOptions.width = this.container.style.offsetWidth;
    this._defaultOptions.height = this.container.style.offsetHeight;

    //this._options = Object.assign({}, this._defaultOptions, options);

    //獲得最終配置
    this._options = this.optionAssign(this._defaultOptions, options);

    this.create();
  }

  //用B更新A的屬性 並返回結果


  _createClass(SimpleCalendar, [{
    key: 'optionAssign',
    value: function optionAssign(optionsA, optionsB) {
      for (var key in optionsB) {
        if (typeof optionsA[key] === 'function') {
          if (typeof optionsB[key] === 'function') {
            optionsA[key] = optionsB[key];
          } else {
            console.warn(key + ' must be a function');
          }
        } else if (_typeof(optionsA[key]) !== 'object') optionsA[key] = optionsB[key];else {
          optionsA[key] = this.optionAssign(optionsA[key], optionsB[key]);
        }
      }
      return optionsA;
    }

    //生成日曆樣式

  }, {
    key: 'create',
    value: function create() {
      var root = this.container;
      root.innerHTML = '<div class="sc-header"> </div> <div class="sc-body"> </div>';
      root.style.width = this._options.width;
      root.style.height = this._options.height;
      root.className = 'sc-calendar';
      var header = root.querySelector('.sc-header');
      var scbody = root.querySelector('.sc-body');
      //actions
      header.innerHTML = header.innerHTML + '<div class="sc-actions">' + '      <div class="sc-yleft arrow">' + '        &lsaquo;</div>' + '      <select class="sc-select-year" name="" style="width:80%">' + '      </select>' + '      <div class="sc-yright arrow">&rsaquo;</div>' + '  </div>';
      header.innerHTML = header.innerHTML + '<div class="sc-actions">' + '    <div class="sc-mleft arrow">' + '      &lsaquo;</div>' + '    <select class="sc-select-month" name="" style="width:80%">' + '    </select>' + '    <div class="sc-mright arrow">&rsaquo;</div>' + '</div>';
      header.innerHTML = header.innerHTML + '<div class="sc-actions"><span class="sc-return-today ">返回今天</span></div>';
      header.innerHTML = header.innerHTML + '<div class="sc-actions"><span class="sc-time"></span></div>';
      scbody.innerHTML = ' <div class="sc-week"> </div> <div class="sc-days"> </div>';
      var week = scbody.querySelector('.sc-week');
      var days = scbody.querySelector('.sc-days');
      for (var i = 0; i < 7; i++) {
        week.innerHTML = week.innerHTML + ' <div class="sc-week-item"></div>';
      }
      for (var i = 0; i < 35; i++) {
        days.innerHTML = days.innerHTML + '<div class="sc-item"><div class="day"></div><div class="lunar-day"></div></div>';
      }
      //添加下拉框數據
      this.updateSelect(this.tyear, this.tmonth);
      //刷新日曆
      this.update();
      //時間刷新
      self.setInterval('SimpleCalendar.timeupdate()', 200);
    }

    //刷新日曆

  }, {
    key: 'update',
    value: function update() {
      var month = arguments.length <= 0 || arguments[0] === undefined ? this.tmonth : arguments[0];
      var year = arguments.length <= 1 || arguments[1] === undefined ? this.tyear : arguments[1];

      this.updateSize();
      this.updateWeek();
      this.addData(year, month);
      this.updateHoliday(year, month);
      this.updateMark(year, month);
      this.updateFestival(year, month);
      this.updateEvent();
      this.updateTheme(this._options.theme);
    }

    //更新Select2下拉框中的值

  },{
        key: 'updateSelect2Val',
        value: function updateSelect2Val() {
          var month = arguments.length <= 0 || arguments[0] === undefined ? this.tmonth : arguments[0];
          var year = arguments.length <= 1 || arguments[1] === undefined ? this.tyear : arguments[1];
          //下拉框
          var selectYear = this.container.querySelector('.sc-select-year');
          var selectMonth = this.container.querySelector('.sc-select-month');
          $(selectYear).select2('val',year);
          $(selectMonth).select2('val',month);
         
        }

        //獲取Select2選中下拉框(值和文本)

   },{
        key: 'getSelect2Data',
        value: function getSelect2Data(element) {
            return $(element).select2("data");
        }

     //調整大小

   },{
    key: 'updateSize',
    value: function updateSize() {
      var width = arguments.length <= 0 || arguments[0] === undefined ? this._options.width : arguments[0];
      var height = arguments.length <= 1 || arguments[1] === undefined ? this._options.height : arguments[1];

      //將大小賦值給option
      this._options.width = width;
      this._options.height = height;

      this.container.style.width = width;
      this.container.style.height = height;

      //根據長度和寬度大小調整適合的樣式
      if (parseInt(width) < 500) {
        var actions = this.arrayfrom(this.container.querySelectorAll('.sc-actions'));
        actions.forEach(function (v, i) {
          v.classList.add('sc-actions-big');
        });
      } else {
        var actions = this.arrayfrom(this.container.querySelectorAll('.sc-actions'));
        actions.forEach(function (v, i) {
          v.classList.remove('sc-actions-big');
        });
      }
      if (parseInt(height) < 400) {
        var items = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
        var weeks = this.arrayfrom(this.container.querySelectorAll('.sc-week-item'));
        items.forEach(function (v, i) {
          v.querySelector('.day').classList.add('sc-item-small');
        });
        weeks.forEach(function (v, i) {
          v.classList.add('sc-item-small');
        });
      } else {
        var items = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
        var weeks = this.arrayfrom(this.container.querySelectorAll('.sc-week-item'));
        items.forEach(function (v, i) {
          v.querySelector('.day').classList.remove('sc-item-small');
        });
        weeks.forEach(function (v, i) {
          v.classList.remove('sc-item-small');
        });
      }
    }

    //刷新下拉框 只有在初始化和設置語言後纔會更新

  }, {
    key: 'updateSelect',
    value: function updateSelect(year, month) {
      //下拉框
      var selectYear = this.container.querySelector('.sc-select-year');
      var selectMonth = this.container.querySelector('.sc-select-month');
      selectYear.innerHTML = '';
      for (var i = this._options.timeRange.startYear; i < this._options.timeRange.endYear + 1; i++) {
        selectYear.innerHTML += '<option value="' + i + '">' + i + '</option>';
      }
      selectMonth.innerHTML = '';
      for (var i = 0; i < 12; i++) {
        var data = this.languageData['months_' + this._options.language];
        selectMonth.innerHTML += '<option value="' + (i + 1) + '">' + data[i] + '</option>';
      }

      selectYear.value = year;
      selectMonth.value = month;
    }

    //刷新星期

  }, {
    key: 'updateWeek',
    value: function updateWeek() {
      var weeks = this.arrayfrom(this.container.querySelectorAll('.sc-week-item'));
      var data = this.languageData['days_' + this._options.language];
      if (!data) {
        console.error('language error!');
      }
      weeks.forEach(function (v, i) {
        v.innerHTML = data[i];
      });
    }

    //添加陽曆陰曆數據

  }, {
    key: 'addData',
    value: function addData(year, month) {
      var options = this._options;
      var daysElement = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
      var day = new Date(year, month - 1, 1);
      var week = day.getDay();
      if (week == 0) week = 7;
      var monthNumber = this.solarDays(year, month);
      var prevMonthNumber = this.solarDays(year, month - 1);
      if (month - 1 <= 0) {
            if (year - 1 < 1901) {
                prevMonthNumber = this.solarDays(year, 1);
            } else {
                prevMonthNumber = this.solarDays(year - 1, 12);
            }
      } 

      //計算獲得第一個格子的日期
      var thispageStart = new Date(Date.parse(day) - (week - 1) * 24 * 3600 * 1000);
      
      //取得節氣數據
      var solarTermdata = this.languageData['solarTerm'];
      
      //對每個格子遍歷
      for (var i = 0; i < 35; i++) {
        daysElement[i].className = 'sc-item';
        var theday = new Date(Date.parse(thispageStart) + i * 24 * 3600 * 1000);
        var writeyear = theday.getFullYear();
        var writeday = theday.getDate();
        var writemonth = theday.getMonth() + 1;
        if (writemonth != month) {
          daysElement[i].classList.add('sc-othermenth');
        }
        daysElement[i].querySelector('.day').innerHTML = writeday;
        //判斷是否添加陰曆
        if (this._options.showLunarCalendar) {;
          daysElement[i].querySelector('.lunar-day').innerHTML = new LunarHelp(writeyear, writemonth, writeday).getLunarDayName();
        } else {
          daysElement[i].querySelector('.lunar-day').innerHTML = '';
          daysElement[i].classList.add('item-nolunar');
        }
        
        //判斷是否添加節氣
        if (options.showSolarTerm) {
          var solarTermVal = '';
          var upObj = this.up(i, week, prevMonthNumber, monthNumber);
          var objDate = new Date(year, parseInt(month) + upObj.status - 1, upObj.num);
          var y = objDate.getFullYear(),m = objDate.getMonth() + 1,d = objDate.getDate();
          
        //月柱 1900年1月小寒之前爲 丙子月(60進制12)
          var firstNode = this.sTerm(y,(m * 2 - 1)); //返回當月「節」爲幾日開始
          var secondNode = this.sTerm(y,(m * 2)); //返回當月「節」爲幾日開始
          if(d == firstNode){
              solarTermVal = solarTermdata[m * 2 - 2] || '';
              daysElement[i].querySelector('.lunar-day').innerHTML = solarTermVal;
              daysElement[i].classList.add('sc-festival');
          }
          if(d == secondNode) {
              solarTermVal = solarTermdata[m * 2 - 1] || ''; 
              daysElement[i].querySelector('.lunar-day').innerHTML = solarTermVal;
              daysElement[i].classList.add('sc-festival');
          }
        }

        //添加today樣式
        if (this.tyear == writeyear && this.tday == writeday && this.tmonth == writemonth) {
          this.selectDay = daysElement[i];
          daysElement[i].classList.add("sc-today");
        }
      }
    }

    //

  },{
      key: 'up',
      value: function up(i, firstWeek, prevMonthNumber, monthNumber){
            var num = i + 1;
            if (num - firstWeek < 0) {
                num = prevMonthNumber + num - firstWeek + 1;
                return {
                    status: -1,
                    num: num
                }
            } else if (num - firstWeek + 1 > monthNumber) {
                num = (num - firstWeek + 1) % monthNumber;
                return {
                    status: 1,
                    num: num
                }
            } else {
                num = num - firstWeek + 1;
                return {
                    status: 0,
                    num: num
                }
            }
      }
      
    //刷新標記日期
  },{
    key: 'updateMark',
    value: function updateMark(year, month) {
      var options = this._options;
      if (options.showMark) {
        var daysElement = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
        var currentmonth = month - 1;
        //取得節日數據
        var data = options.mark;
        if (data) {
          daysElement.forEach(function (v, i) {

            var day = +v.querySelector('.day').innerHTML;
            if (day == 1) currentmonth++;

            if (data[year + '-' + currentmonth + '-' + day]) {
              v.classList.add('sc-mark');

              // 加強標籤效果
              var reminder = v.querySelector('.lunar-day');
              reminder.innerText = data[year + '-' + currentmonth + '-' + day];

              v.title = data[year + '-' + currentmonth + '-' + day];
            } else {
              v.classList.remove('sc-mark');
              v.title = '';
            }
          });
        }
      }
    }
    //返回某年的第n個節氣爲幾日(從1小寒起算)

  },{
    key: 'sTerm',
    value: function sTerm(y,n) {
        if (y < 1900 || y > 2049) {
            return -1;
        }
        if (n < 1 || n > 24) {
            return -1;
        }
       /* var sTermInfo = new Array(0,21208,42467,63836,85337,107014,128867,150921,173149,195551,218072,240693,263343,285989,308563,331033,353350,375494,397447,419210,440795,462224,483532,504758);
        var offDate = new Date((31556925974.7*(y-1900)+sTermInfo[n]*60000)+Date.UTC(1900,0,6,2,5));
        return(offDate.getUTCDate());*/
        var _table = this.languageData.sTermInfo[y - 1900];
        var _info = [
            parseInt('0x' + _table.substr(0, 5)).toString(),
            parseInt('0x' + _table.substr(5, 5)).toString(),
            parseInt('0x' + _table.substr(10, 5)).toString(),
            parseInt('0x' + _table.substr(15, 5)).toString(),
            parseInt('0x' + _table.substr(20, 5)).toString(),
            parseInt('0x' + _table.substr(25, 5)).toString()
        ];
        var _calday = [
            _info[0].substr(0, 1),
            _info[0].substr(1, 2),
            _info[0].substr(3, 1),
            _info[0].substr(4, 2),

            _info[1].substr(0, 1),
            _info[1].substr(1, 2),
            _info[1].substr(3, 1),
            _info[1].substr(4, 2),

            _info[2].substr(0, 1),
            _info[2].substr(1, 2),
            _info[2].substr(3, 1),
            _info[2].substr(4, 2),

            _info[3].substr(0, 1),
            _info[3].substr(1, 2),
            _info[3].substr(3, 1),
            _info[3].substr(4, 2),

            _info[4].substr(0, 1),
            _info[4].substr(1, 2),
            _info[4].substr(3, 1),
            _info[4].substr(4, 2),

            _info[5].substr(0, 1),
            _info[5].substr(1, 2),
            _info[5].substr(3, 1),
            _info[5].substr(4, 2),
        ];
        return parseInt(_calday[n - 1]);
    }
     //返回公曆(!)y年m月的天數
  },{
    key: 'solarDays',
    value: function solarDays(y, m){
        var solarMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        if (m > 12 || m < 1) {
            return -1
        } //若參數錯誤 返回-1
        var ms = m - 1;
        if (ms == 1) { //2月份的閏平規律測算後確認返回28或29
            return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28);
        } else {
            return (solarMonth[ms]);
        }
    }
    //刷新節日數據
   }, {
    key: 'updateFestival',
    value: function updateFestival(year, month) {
      var options = this._options;
      var daysElement = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
      var currentmonth = month - 1;
      //取得節日數據
      var data = this.languageData['feativals_' + this._options.language];
      var lunardata = this.languageData['lunarFeatival_' + this._options.language];
      
      if (!data) {
        console.error('language error!');
      }
      daysElement.forEach(function (v, i) {
        var day = +v.querySelector('.day').innerHTML;
        if (day == 1) currentmonth++;
        
        //國際節日
        if (options.showFestival) {
          if (data[currentmonth + '-' + day]) {
            v.querySelector('.lunar-day').innerHTML = data[currentmonth + '-' + day];
            v.classList.add('sc-festival');
          }
        }

        //陰曆節日
        if (lunardata && options.showLunarFestival) {
          var lunar = new LunarHelp(year, currentmonth, day).getLunarDayNum();
          if (lunardata[lunar.month + '-' + lunar.day]) {
            v.querySelector('.lunar-day').innerHTML = lunardata[lunar.month + '-' + lunar.day];
            v.classList.add('sc-festival');
          }
        }
      });
    }

    //刷新假期 休假

  }, {
    key: 'updateHoliday',
    value: function updateHoliday(year, month) {
      var options = this._options;
      if (options.showHoliday) {
        var daysElement = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
        var currentmonth = month - 1;
        //取得節日數據
        var data = this.languageData.vocation['data_' + year];
        if (data) {
          daysElement.forEach(function (v, i) {
            var day = +v.querySelector('.day').innerHTML;
            if (day == 1) currentmonth++;
            //國際節日
            if (data.indexOf((currentmonth == 0 ? year - 1 : year) + '-' + (currentmonth == 0 ? 12 : currentmonth) + '-' + day) > -1) {
              v.classList.add('sc-vocation');
            }
          });
        }
      }
    }

    //刷新主題

  }, {
    key: 'updateTheme',
    value: function updateTheme(theme) {
      if (this._options.theme.changeAble) {
        var daytheme = theme.days;
        var weektheme = theme.weeks;
        var weeks = this.arrayfrom(this.container.querySelectorAll('.sc-week-item'));
        var days = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
        weeks.forEach(function (v, i) {
          v.style.backgroundColor = weektheme.backgroundColor;
          v.style.fontSize = weektheme.fontSize;
          v.style.color = weektheme.fontColor;
        });
        days.forEach(function (v, i) {
          if (!v.classList.contains('sc-today')) {
            v.style.backgroundColor = daytheme.backgroundColor;
            v.querySelector('.day').style.color = daytheme.fontColor;
          } else {
            v.style.backgroundColor = theme.todaycolor;
          }
          v.querySelector('.day').style.fontSize = daytheme.fontSize;
        });
        var Calendar = this;
        //active border
        days.forEach(function (v, i) {
          v.onmouseover = function (e) {
            this.style.borderColor = theme.activeSelectColor;
            this.style.borderWidth = '1px';
          };
          v.onmouseout = function (e) {
            this.style.borderColor = '#F1EBE4';
            this.style.borderWidth = '0 0 1px 1px';
          };
        });
      }
    }

    //刷新事件

  }, {
    key: 'updateEvent',
    value: function updateEvent() {
      var daysElement = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
      var container = this.container;
      var calendar = this;
      daysElement.forEach(function (v, i) {
        v.onmouseover = function (e) {
          this.classList.add('sc-active-day');
        };
        v.onmouseout = function (e) {
          this.classList.remove('sc-active-day');
        };
        v.onclick = function () {
          calendar.selectDay = v;
          var pre = container.querySelector('.sc-selected');
          if (pre) pre.classList.remove('sc-selected');
          this.classList.add('sc-selected');
          if (typeof calendar._options.onSelect === 'function') {
            calendar._options.onSelect(calendar.getSelectedDay());
          }
        };
      });

      var selectYear = container.querySelector('.sc-select-year');
      var selectMonth = container.querySelector('.sc-select-month');
      selectYear.onchange = function () {
        var m = calendar.getSelect2Data(selectMonth).id;
        var y = this.value;
        calendar.update(m, y);
        calendar.updateSelect2Val(m,y);
      };

      selectMonth.onchange = function () {
        var y = calendar.getSelect2Data(selectYear).id;
        var m = this.value;
        calendar.update(m, y);
        calendar.updateSelect2Val(m,y);
      };

      var yearadd = container.querySelector('.sc-yright');
      var yearsub = container.querySelector('.sc-yleft');
      var monthadd = container.querySelector('.sc-mright');
      var monthsub = container.querySelector('.sc-mleft');

      yearadd.onclick = function () {
        var currentyear = calendar.getSelect2Data(selectYear).id;
        var currentmonth = calendar.getSelect2Data(selectMonth).id;
        if (currentyear < 2049) currentyear++;
        selectYear.value = currentyear;
        calendar.updateSelect2Val(currentmonth,currentyear);
        calendar.update(currentmonth, currentyear);
      };
      yearsub.onclick = function () {
        var currentyear = calendar.getSelect2Data(selectYear).id;
        var currentmonth = calendar.getSelect2Data(selectMonth).id;
        if (currentyear > 1901) currentyear--;
        selectYear.value = currentyear;
        calendar.updateSelect2Val(currentmonth,currentyear);
        calendar.update(currentmonth, currentyear);
      };
      monthadd.onclick = function () {
        var currentmonth = calendar.getSelect2Data(selectMonth).id;
        var currentyear = calendar.getSelect2Data(selectYear).id;
        if (currentmonth < 12) currentmonth++;else {
          currentmonth = (currentyear == 2049 ? 12 : 1);
          selectYear.value = (currentyear == 2049 ? 2049 : ++currentyear);
        };
        selectMonth.value = currentmonth;
        calendar.updateSelect2Val(currentmonth,currentyear);
        calendar.update(currentmonth, currentyear);
      };
      monthsub.onclick = function () {
        var currentmonth = calendar.getSelect2Data(selectMonth).id;
        var currentyear = calendar.getSelect2Data(selectYear).id;
        if (currentmonth > 1) currentmonth--;else {
          currentmonth = (currentyear == 1901 ? 1 : 12);
          selectYear.value = (currentyear == 1901 ? 1901 : --currentyear);
        }
        selectMonth.value = currentmonth;
        calendar.updateSelect2Val(currentmonth,currentyear);
        calendar.update(currentmonth, currentyear);
      };

      var returntoday = container.querySelector('.sc-return-today');
      returntoday.onclick = function () {
        selectYear.value = calendar.tyear;
        selectMonth.value = calendar.tmonth;
        calendar.updateSelect2Val(calendar.tmonth,calendar.tyear);
        calendar.update();
      };
    }

    //添加標記

  }, {
    key: 'addMark',
    value: function addMark(day, info) {
      this._options.mark[day] = info;
      this.update();
    }

    //獲取用戶點擊的日期

  }, {
    key: 'getSelectedDay',
    value: function getSelectedDay() {
      var selectYear = this.container.querySelector('.sc-select-year').value;
      var selectMonth = this.container.querySelector('.sc-select-month').value;
      var selectDay = this.selectDay.querySelector('.day').innerHTML;

      // 計算當前界面中的其餘月份差
      var count = 0;
      if (this.selectDay.classList.contains('sc-othermenth')) {
        if (+selectDay < 15) count++;else count--;
      }
      return new Date(selectYear, selectMonth - 1 + count, selectDay);
    }

    //設置語言

  }, {
    key: 'setLenguage',
    value: function setLenguage(language) {
      this._options.language = language;
      var selectYear = this.container.querySelector('.sc-select-year');
      var selectMonth = this.container.querySelector('.sc-select-month');
      this.updateSelect(selectYear.value, selectMonth.value);
      this.update();
    }

    //設置是否顯示節日

  }, {
    key: 'showFestival',
    value: function showFestival(s) {
      this._options.showFestival = s;
      this.update();
    }

    //設置是否顯示假期

  }, {
    key: 'showHoliday',
    value: function showHoliday(s) {
      this._options.showHoliday = s;
      this.update();
    }

    //設置是否顯示節氣

  }, {
    key: 'showSolarTerm',
    value: function showSolarTerm(s) {
      this._options.showSolarTerm = s;
      this.update();
    }

    //設置是否顯示陰曆節日

  }, {
    key: 'showLunarFestival',
    value: function showLunarFestival(s) {
      this._options.showLunarFestival = s;
      this.update();
    }

    //設置是否顯示陰曆日期

  }, {
    key: 'showLunarCalendar',
    value: function showLunarCalendar(s) {
      this._options.showLunarCalendar = s;
      this.update();
    }

    //設置是否顯示標記日期

  }, {
    key: 'showMark',
    value: function showMark(s) {
      this._options.showMark = s;
      this.update();
    }
    //將nodelist轉爲數組

    //nodelist轉數組

  }, {
    key: 'arrayfrom',
    value: function arrayfrom(nidelist) {
      var array = [];
      [].forEach.call(nidelist, function (v) {
        array.push(v);
      });
      return array;
    }

    // get options() {
    //   console.log(this._options);
    // }

  }]);

  return SimpleCalendar;
}();
//時間刷新函數


SimpleCalendar.timeupdate = function () {
  var timespan = document.querySelectorAll('.sc-time');
  var now = new Date();
  var nh = now.getHours();
  var nm = now.getMinutes();
  var ns = now.getSeconds();
  if (nh < 10) nh = '0' + nh;
  if (nm < 10) nm = '0' + nm;
  if (ns < 10) ns = '0' + ns;
  [].forEach.call(timespan, function (v) {
    v.innerHTML = '時間：' + nh + ":" + nm + ':' + ns;
  });
};
//國際化，和一些節日數據，標記數據
SimpleCalendar.prototype.languageData = {
  feativals_CH: {
    '1-1': '元旦',
    '2-14': '情人節',
    '3-8': '婦女節',
    '3-12': '植樹節',
    '4-1': '愚人節',
    '4-22': '地球日',
    '5-1': '勞動節',
    '5-4': '青年節',
    '6-1': '兒童節',
    '7-1': '建黨節',
    '8-1': '建軍節',
    '9-10': '教師節',
    '10-1': '國慶節',
    '12-25': '聖誕節'
  },
  feativals_EN: {
    '1-1': "new year’s day",
    '2-14': "Saint Valentine's Day",
    '3-8': 'international women’s day',
    '3-12': "Arbor Day",
    '4-1': "April Fool's Day",
    '4-22': "Earth Day",
    '5-1': "international labour day",
    '5-4': "Chinese Youth Day",
    '6-1': "Children's Day",
    '7-1': "The party's Day",
    '8-1': "the Army's Day",
    '9-10': "Teachers' Day",
    '10-1': 'National Day',
    '12-25': 'Christmas Day'
  },
  lunarFeatival_CH: {
    '1-1': '春節',
    '2-2': '龍擡頭',
    '1-15': '元宵節',
    '5-5': '端午節',
    '8-15': '中秋節',
    '9-9': '重陽節',
    '12-30': '除夕'
  },
  //節氣
  solarTerm: [
    "小寒","大寒","立春","雨水","驚蟄","春分","清明","穀雨","立夏","小滿","芒種","夏至","小暑","大暑","立秋","處暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"
  ],//1900-2100各年的24節氣日期速查表
  sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f',
        '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
        '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa',
        '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f',
        'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f',
        '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa',
        '97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2',
        '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f',
        '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e',
        '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
        '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722',
        '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f',
        '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
        '97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
        '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722',
        '9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f',
        '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
        '97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
        '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722',
        '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
        '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
        '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
        '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722',
        '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
        '97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
        '97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
        '9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722',
        '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
        '97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
        '9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
        '7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
        '7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
        '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
        '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
        '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
        '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
        '97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
        '9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
        '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721',
        '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2',
        '977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
        '7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
        '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd',
        '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
        '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
        '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
        '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd',
        '7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
        '977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
        '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721',
        '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5',
        '7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722',
        '7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
        '7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
        '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35',
        '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
        '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721',
        '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd',
        '7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35',
        '7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
        '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721',
        '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5',
        '7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35',
        '665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
        '7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
        '7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35',
        '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'
  ],
  days_EN: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  days_CH: ["一", "二", "三", "四", "五", "六", "日"],
  months_EN: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  months_CH: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
  vocation: {
    data_2017: ['2016-12-31','2017-1-1', '2017-1-2', '2017-1-27', '2017-1-28', '2017-1-29', '2017-1-30', '2017-1-31', '2017-2-1', '2017-2-2', '2017-4-2', '2017-4-3', '2017-4-4', '2017-4-29', '2017-4-30', '2017-5-1', '2017-6-28', '2017-6-29', '2017-6-30', '2017-10-1', '2017-10-2', '2017-10-3', '2017-10-4', '2017-10-5', '2017-10-6', '2017-10-7','2017-10-8']
  }
};

SimpleCalendar.prototype.tyear = new Date().getFullYear();
SimpleCalendar.prototype.tmonth = new Date().getMonth() + 1;
SimpleCalendar.prototype.tday = new Date().getDate();
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。