JS日历可左右切换，显示当前有票的所有日期

之前做的旅游小程序，有需求是要把今年所有有票的月份及日期价格显示出来，大概如下图：

现在JS写，整理一下代码：

<div id="calendar" class="calendar">
  <div class="selNowDays"></div>
  <div class="months">
    <strong id="pre" class="pre">«</strong>
    <div class="months-outer">
      <div class="months-con-outer">
        <div class="months-con"></div>
      </div>
    </div>
    <strong id="next" class="next">»</strong>
  </div>
  <div class="weeks"></div>
  <div class="days">
  </div>
</div>

@charset 'utf-8';

.calendar {
  width: 320px;
}

.selNowDays {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  font-size: 16px;
}

.months {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
}

.months strong {
  width: 8%;
  text-align: center;
}

.months-outer {
  overflow: hidden;
  width: 84%;
  height: 36px;
}

.months-con-outer {
  width: 100%;
  height: 52px;
  overflow-x: auto;
}

.months-con {
  display: inline-block;
  white-space: nowrap;
  height: 100%;
}

.months-con span {
  display: inline-block;
  height: 36px;
  padding: 0 5px;
  line-height: 36px;
  font-size: 14px;
  cursor: pointer;
}

.months-con .sel-month {
  color: #fff;
  background: #3cf;
}


.weeks {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.weeks span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20%;
  height: 34px;
  color: #fff;
  font-size: 14px;
  background: #3cf;
}

.days {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.days span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45.5px;
  height: 45.5px;
  cursor: pointer;
}

.days .has-day {
  background: #ffc033;
  -moz-box-shadow: inset 0px 0px 1px #ffc033;
  -webkit-box-shadow: inset 0px 0px 1px #ffc033;
  box-shadow: inset 0px 0px 1px #ffc033;
}

.days .today-day {
  background: #9cd8ec;
  -moz-box-shadow: inset 0px 0px 1px #9cd8ec;
  -webkit-box-shadow: inset 0px 0px 1px #9cd8ec;
  box-shadow: inset 0px 0px 1px #9cd8ec;
}

.days .sel-day {
  -moz-box-shadow: inset 0px 0px 1px #d45b2d;
  -webkit-box-shadow: inset 0px 0px 1px #d45b2d;
  box-shadow: inset 0px 0px 1px #d45b2d;
}

var weeks = ['日', '一', '二', '三', '四', '五', '六'];
var months = ['2018-12-01', '2018-12-20', '2019-01-02', '2019-01-12', '2019-02-04', '2019-02-14', '2019-03-23', '2019-04-12', '2019-06-30']
var monthList = months;
var calendar = document.getElementById('calendar');
var monthsHtml = document.querySelector('#calendar .months-con');
var weeksHtml = document.querySelector('#calendar .weeks');
var daysHtml = document.querySelector('#calendar .days');
var selDayHtml = document.querySelector('.selNowDays')
var pre = document.querySelector('#pre');
var next = document.querySelector('#next');
var nowSelYear = null;
var nowSelMonth = null;
var nowSelDay = null;
var nowMonthIndex = 0;

// 月份显示
function getMonths(ind) {
  var str = ''
  var css = ''
  var monthArr = uniq(months)
  for (let i = 0; i < monthArr.length; i++) {
    if (i === parseInt(ind)) {
      css = 'sel-month'
      nowSelYear = monthArr[i].substring(0, 4)
      nowSelMonth = monthArr[i].substring(5, 7)
    } else {
      css = ''
    }
    str += `<span data-index=` + i + ` class="` + css + `">` + monthArr[i].substring(0, 4) + '年' + monthArr[i].substring(
      5, 7) + `月</span>`
  }

  return str
}
monthsHtml.innerHTML = getMonths(nowMonthIndex)

// 去重
function uniq(array) {
  var temp = [];
  var index = [];
  var l = array.length;
  for (var i = 0; i < l; i++) {
    for (var j = i + 1; j < l; j++) {
      if (array[i].substring(0, 7) === array[j].substring(0, 7)) {
        i++;
        j = i;
      }
    }
    temp.push(array[i]);
    index.push(i);
  }
  return temp;
}

// 星期显示
function getWeeks() {
  var str = ''
  for (let i = 0; i < weeks.length; i++) {
    str += `<span>` + weeks[i] + `</span>`
  }
  return str
}
weeksHtml.innerHTML = getWeeks()

// 日期显示
function getDays(year, month) {
  var days = getThisMonthDays(year, month)
  var daysFirst = getFirstDayOfWeek(year, month)
  var str = ''
  var str2 = ''
  var css = ''
  var css2 = ''
  // 当前时间
  var date = formartDate(new Date())

  nowSelDay = nowSelDay ? nowSelDay : 1

  for (let i = 1; i <= daysFirst; i++) {
    str2 += '<span></span>'
  }
  for (let i = 1; i <= days; i++) {
    if (nowSelYear == date.substring(0, 4) && nowSelMonth == date.substring(5, 7) && i == date.substring(8, 10)) {
      css = 'today-day'
    } else {
      css = ''
    }

    if (nowSelDay == i) {
      css2 = 'sel-day'
    } else {
      css2 = ''
    }

    for (let j = 0; j < months.length; j++) {
      if (nowSelYear == months[j].substring(0, 4) && nowSelMonth == months[j].substring(5, 7) && i == months[j].substring(
          8, 10)) {
        css = 'has-day'
      }
    }
    str += `<span data-days="` + i + `" class="` + css + ` ` + css2 + `">` + i + `</span>`
  }
  return str2 + str
}
daysHtml.innerHTML = getDays(nowSelYear, nowSelMonth)

// 长时间转时间字符串
function formartDate(param) {
  const date = new Date(param)
  const Y = date.getFullYear() + '-'
  const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-'
  const D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate()
  return Y + M + D
}

// 当月第一天在周几
function getFirstDayOfWeek(year, month) {
  return new Date(Date.UTC(year, month - 1, 1)).getDay();
}
// 当月总天数
function getThisMonthDays(year, month) {
  return new Date(year, month, 0).getDate();
}

// 上一个月
function preMonth() {
  if (nowMonthIndex == 0) {
    return
  } else {
    nowMonthIndex--
    nowSelDay = 1
    monthsHtml.innerHTML = getMonths(nowMonthIndex)
    daysHtml.innerHTML = getDays(nowSelYear, nowSelMonth)
    selDayHtml.innerHTML = nowSelDate()
  }
}

// 下一个月
function nextMonth() {
  if (nowMonthIndex == uniq(months).length - 1) {
    return
  } else {
    nowMonthIndex++
    nowSelDay = 1
    monthsHtml.innerHTML = getMonths(nowMonthIndex)
    daysHtml.innerHTML = getDays(nowSelYear, nowSelMonth)
    selDayHtml.innerHTML = nowSelDate()
  }
}

// 当前选中的日期
function nowSelDate() {
  var str = ''
  str = `选择日期:` + nowSelYear + `年` + nowSelMonth + `月` + nowSelDay + `日`
  return str
}
selDayHtml.innerHTML = nowSelDate()

window.onload = function () {
  // 月份切换
  document.querySelector('.months-con').onclick = function (ev) {
    var ev = ev || window.event
    var target = ev.target || ev.srcElement
    if (target.nodeName.toLowerCase() == 'span') {
      if (target.className == 'sel-month') {
        return
      } else {
        nowMonthIndex = target.dataset.index
        monthsHtml.innerHTML = getMonths(target.dataset.index)
        daysHtml.innerHTML = getDays(nowSelYear, nowSelMonth)
        selDayHtml.innerHTML = nowSelDate()
      }
    }
  }

  // 日期切换
  document.querySelector('.days').onclick = function (ev) {
    var ev = ev || window.event
    var target = ev.target || ev.srcElement
    if (target.nodeName.toLowerCase() == 'span') {
      nowSelDay = target.dataset.days
      daysHtml.innerHTML = getDays(nowSelYear, nowSelMonth)
      selDayHtml.innerHTML = nowSelDate()
    }
  }

  // 上一个月
  document.getElementById('pre').onclick = function () {
    preMonth()
  }
  // 下一个月
  document.getElementById('next').onclick = function () {
    nextMonth()
  }
}