日历插件 可多选以及颜色区分

本文章是记录自己整理的日历插件，根据jquery插件库 下载下来后，去除繁琐的功能，整理为自己需要的日历样式。(根据自己项目，需要的是其中的日历可多选天数且颜色变化功能)
原日历插件链接：http://www.jq22.com/yanshi6487

整理的其中还有没有用到的东西，没整理干净，如有需要自己查看。

代码html：

<div class="col-md-12" style="background-color: #FFF;border-radius:4px">
	<div class="row" style="margin-top:5px;margin-bottom: 5px">
	<div class="col-md-4" style="text-align: left">
	  <i title="上一年" id="nianjian" class="ymNaviBtn lsArrow"></i>
	  <i title="上一月" id="yuejian" class="ymNaviBtn lArrow"></i>
	</div>
	<div class="col-md-4" style="text-align: center">
	  <span id="nian"></span>
	  <span>年</span>
	  <span id="yue"></span>
	  <span>月</span>
	</div>
	<div class="col-md-4" style="text-align: right">
	  <i id="nianjia" title="下一年" class="ymNaviBtn rsArrow" style="float:right;"></i>
	  <i id="yuejia" title="下一月" class="ymNaviBtn rArrow" style="float:right;"></i>
	</div>
	</div>
	<table id="tab" class="col-md-12 biao" style="margin-bottom: 5px">
		<tr class="" style="font-size:12px;text-align:center;">
		  <td class="red">日</td>
		  <td>一</td>
		  <td>二</td>
		  <td>三</td>
		  <td>四</td>
		  <td>五</td>
		  <td class="red">六</td>
		</tr>
	</table>
</div>

代码ts:

需要调用几个样式文件（文件内容可根据情况删减），可在我的上传资源中查找。

styleUrls: [
    '../../assets/calendar/all.css',
    '../../assets/calendar/skin.css',
    '../../assets/calendar/fontSize12.css',
    '../../assets/calendar/calendar.css']

//-----------------------------------------------------------日历的处理
/*有关日历的参数定义 start*/
  solarMonth:any;
  Today:any;
  tY:any;
  tM:any;
  tD:any;
  tLength:any = 0;//公历当月天数
  tWeekDay:any;//公历当月1日星期几

  global:any;//当前年月变化控制变化
  dateSelection:any;
  dateDay:any = [15,18,24];//有录像的时间
  /* 有关日历的参数定义 end*/
  this.calendar();
  calendar():void{
    this.solarMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
    this.Today = new Date();
    this.tY = this.Today.getFullYear();
    this.tM = this.Today.getMonth();
    this.tD = this.Today.getDate();
    this.global = {
      currYear : -1, // 当前年
      currMonth : -1 // 当前月，0-11
    };
    const that = this;
    this.dateSelection = {
      currYear : -1,
      currMonth : -1,

      minYear : 1901,
      maxYear : 2100,

      beginYear : 0,
      endYear : 0,

      tmpYear : -1,
      tmpMonth : -1,
      init : function(year, month) {
        if (typeof year === 'undefined' || typeof month === 'undefined') {
          year = that.global.currYear;
          month = that.global.currMonth;
        }
        this.setYear(year);
        this.setMonth(month);
        this.showYearContent();
        this.showMonthContent();
      },
      setYear : function(value) {
        if (this.tmpYear === -1 && this.currYear !== -1) {
          this.tmpYear = this.currYear;
        }
        $('#SY' + this.currYear).removeClass('curr');
        this.currYear = value;
        $('#SY' + this.currYear).addClass('curr');
      },
      setMonth : function(value) {
        if (this.tmpMonth === -1 && this.currMonth !== -1) {
          this.tmpMonth = this.currMonth;
        }
        $('#SM' + this.currMonth).removeClass('curr');
        this.currMonth = value;
        $('#SM' + this.currMonth).addClass('curr');
      },
      showYearContent : function(beginYear, endYear) {
        if (!beginYear) {
          if (!endYear) {
            endYear = this.currYear + 1;
          }
          this.endYear = endYear;
          if (this.endYear > this.maxYear) {
            this.endYear = this.maxYear;
          }
          this.beginYear = this.endYear - 3;
          if (this.beginYear < this.minYear) {
            this.beginYear = this.minYear;
            this.endYear = this.beginYear + 3;
          }
        }
        if (!endYear) {
          if (!beginYear) {
            beginYear = this.currYear - 2;
          }
          this.beginYear = beginYear;
          if (this.beginYear < this.minYear) {
            this.beginYear = this.minYear;
          }
          this.endYear = this.beginYear + 3;
          if (this.endYear > this.maxYear) {
            this.endYear = this.maxYear;
            this.beginYear = this.endYear - 3;
          }
        }
        $('#SY' + this.currYear).addClass('curr');
      },
      showMonthContent : function() {
        $('#SM' + this.currMonth).addClass('curr');
      },
      goPrevMonth : function() {
        this.prevMonth();
        this.commit();
      },
      goNextMonth : function() {
        this.nextMonth();
        this.commit();
      },
      goPrevYear : function() {
        this.prevYear();
        this.commit();
      },
      goNextYear : function() {
        this.nextYear();
        this.commit();
      },

      prevMonth : function() {
        let month = this.currMonth - 1;
        if (month === -1) {
          const year = this.currYear - 1;
          if (year >= this.minYear) {
            month = 11;
            this.setYear(year);
          } else {
            month = 0;
          }
        }
        this.setMonth(month);
      },
      nextMonth : function() {
        let month = this.currMonth + 1;
        if (month === 12) {
          const year = this.currYear + 1;
          if (year <= this.maxYear) {
            month = 0;
            this.setYear(year);
          } else {
            month = 11;
          }
        }
        this.setMonth(month);
      },
      prevYear : function() {
        const year = this.currYear - 1;
        if (year >= this.minYear) {
          this.setYear(year);
        }
      },
      nextYear : function() {
        const year = this.currYear + 1;
        if (year <= this.maxYear) {
          this.setYear(year);
        }
      },
      commit : function() {
        if (this.tmpYear !== -1 || this.tmpMonth !== -1) {
          // 如果发生了变化
          if (this.currYear !== this.tmpYear || this.currMonth !== this.tmpMonth) {
            // 执行某操作
            this.showYearContent();
            this.showMonthContent();
            this.changeView();
          }
          this.tmpYear = -1;
          this.tmpMonth = -1;
        }
      },
      changeView : function() {
        that.global.currYear = this.currYear;
        that.global.currMonth = this.currMonth;

        that.clear();
        $("#nian").html(that.global.currYear);
        $("#yue").html(parseInt(that.global.currMonth,0) + 1);
        that.drawCld(that.global.currYear, that.global.currMonth);
      },
    };
    //初始化日期
    this.calendar_init();
    //当前年月变化控制
    this.initRiliIndex();
    //清除数据
    this.clear();
    $("#nian").html(this.tY);
    $("#yue").html(this.tM + 1);
    this.drawCld(this.tY, this.tM);
    //年份递减
    $("#nianjian").click(function() {
      that.dateSelection.goPrevYear();
    });
    //年份递加
    $("#nianjia").click(function() {
      that.dateSelection.goNextYear();
    });
    //月份递减
    $("#yuejian").click(function() {
      that.dateSelection.goPrevMonth();
    });
    //月份递加
    $("#yuejia").click(function() {
      that.dateSelection.goNextMonth();
    });
  }
  calendar_init():void{
    let gNum;
    let str;
    for(let i = 0; i < 6; i++) {
      str += '<tr align=center height="30" id="tt">';
      for(let j = 0; j < 7; j++) {
        gNum = i * 7 + j;
        str += '<td  id="GD' + gNum + '" on="0" style=";border: 1px solid #99BBE8;"><label  id="SD' + gNum + '" style="font-size:18px;';
        if(j === 0){
          str += 'color:red';
        }else if(j === 6){
          if(i % 2 === 1) {
            str += 'color:red';
          }else {
            str += 'color:red';
          }
        }
        str += '"></label><label id="LD' + gNum + '"  size=2  style="white-space:nowrap;overflow:hidden;cursor:default;"></label></td>';
      }
      str += '</tr>';
    }
    $("#tab").append(str);
  }
  initRiliIndex():void{
    const dateObj = new Date();
    this.global.currYear = dateObj.getFullYear();
    this.global.currMonth = dateObj.getMonth();
    this.dateSelection.init();
  }
  //清除数据
  clear():void{
    for (let i = 0; i < 42; i++) {
      const sObj = $("#SD" + i)[0];
      sObj.innerHTML = '';
      const lObj = $("#LD" + i)[0];
      lObj.innerHTML = '';
      $("#GD" + i).css("background-color","");
    }

  }
  drawCld(SY, SM):void{
    let sD;
    const week= [7,1,2,3,4,5,6 ];
    const weekNum = week[new Date(SY, SM, 0, 0, 0, 0, 0).getDay()];//公历当月1日星期几
    const days =  this.solarDays(SY, SM);// //公历当月天数
    for (let i = 0; i < 42; i++) {
      const sObj = $("#SD" + i)[0];
      sObj.className = '';
      sD = i - weekNum;
      if (sD > -1 && sD <  days) {  //日期内
        const day = sD + 1;
        sObj.innerHTML = day;
        for(let m =0;m<this.dateDay.length;m++){
          if(day === this.dateDay[m]){
            $("#GD" + i).css("background-color","rgb(251, 187, 103)");
          }
        }
        //今日颜色
        if(SY === this.tY && SM === this.tM && day === this.tD ){
          $("#GD" + i).css("background-color","rgb(207, 223, 240)");
        }
        const that = this;
        $("#GD" + i).unbind();
        $("#GD" + i).click(function(){
          //非法日期的处理
          if($("#GD" + i).css("background-color") === "rgb(244, 241, 241)"){
            return;
          }
          const onoff = this.attributes["on"].value;
          const nian = $('#nian').text();
          const yue = $('#yue').text();
          const Today = $(this).find("label")[0].innerHTML;
          //手动选择颜色 rgb(68, 182, 174)
          //   今日颜色     rgb(207, 223, 240)
          //   非法颜色     rgb(244, 241, 241)
          //   有录像颜色   rgb(251, 187, 103)
          if(onoff === '0'){//0 状态为未选中
            //其他有选中的需要还原
            for (let n = 0; n < 42; n++) {
              if($("#GD" + n).css("background-color") === "rgb(68, 182, 174)"){
                const spanVal = $("#GD" + n).find("label")[0].innerHTML;
                that.clearColor(n,spanVal,SY, SM);
              }
            }
            this.attributes["on"].value='1';
            $("#GD" + i).css("background-color","rgb(68, 182, 174)");
            const clickTime = nian +"-"+yue+"-"+Today;
            console.log(clickTime);
          }else{
            that.clearColor(i,Today,SY, SM);
          }
        });
      }else {  //非日期
        $("#GD" + i).css("background-color","rgb(244, 241, 241)");
      }
    }
  }
  clearColor(i,day,SY, SM):void{
    $("#GD" + i)[0].attributes["on"].value='0';
    //今日颜色
    if(SY === this.tY && SM === this.tM && parseInt(day,0) === this.tD ){
      $("#GD" + i).css("background-color","rgb(207, 223, 240)");
      return;
    }
    //有录像颜色
    let isChange = true;
    for(let m =0;m<this.dateDay.length;m++){
      if(parseInt(day,0) === this.dateDay[m]){
        $("#GD" + i).css("background-color","rgb(251, 187, 103)");
        isChange = false ;
        break;
      }
    }
    if(isChange){
      $("#GD" + i).css("background-color","");
    }

  }
  //返回公历 y年某m+1月的天数
  solarDays(y, m):any{
    if (m === 1){
      return(((y % 4 === 0) && (y % 100 !== 0) || (y % 400 === 0)) ? 29 : 28);
    }else{
      return(this.solarMonth[m]);
    }
  }

最终的样式：蓝色为点击时触发，橙色为虚拟数据显示，蓝色为当日。