自定义时间日历

<template>
  <div>
    <div>
      <div class="return-curr-date" @click="reset"></div>
      <div class="selected-time">
        <div class="vm prev" @click="prev"></div>
        <i class="vm time">{{ showCurrTime.value }}</i>
        <div class="vm next" @click="next"></div>
      </div>
      <div class="course-table-time-list">
        <div class="cycle">
          <span v-for="(item, index) in cycle" :key="`cycle${index}`">{{ item }}</span>
        </div>
        <ul ref="carousel" class="course-table-container">
          <li v-for="(value, index) in [prevMonth, currMonth, nextMonth]" :key="index" class="vt item">
            <span class="time" v-for="item in value" :key="item ? item.id : Math.random()">
              <span
                @click="selectTime(item)"
                :class="{
                  disable: item && item.disable,
                  selected: item && selected.time === item.time,
                  haveClassDay: item && haveClassDay[item.month] && haveClassDay[item.month].indexOf(item.time) > -1,
                  haveClassBlue: item && item.isEffective
                }"
                class="text"
                >{{ item ? item.date : '' }}</span
              >
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import Flickity from 'flickity'

export default {
  name: 'table-component',

  data() {
    return {
      swiperLength: 3 - 1,
      prevMonth: [],
      currMonth: [],
      nextMonth: [],
      currIndex: 1,
      selected: {},
      haveClassDay: {},
      showCurrTime: {},
      names: ['prevMonth', 'currMonth', 'nextMonth'],
      cycle: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }
  },
  props: {
    teacher_id: [String, Number]
  },
  watch: {
    selected(value) {
      this.$emit('eventSelected', value)
    },
    teacher_id() {
      this.haveClassDay = {}
      this.getHaveClassDayArrData(new Date(this.selected.time.replace(/-/g, '/')))
    }
  },

  mounted() {
    this.init()
  },

  methods: {
    init() {
      const date = new Date()
      this.selected = {
        year: date.getFullYear(),
        month: date.getMonth() + 1,
        date: date.getDate(),
        day: date.getDay(),
        time: `${date.getFullYear()}-${this.numberFull10(date.getMonth() + 1)}-${this.numberFull10(date.getDate())}`
      }
      const flkty = (this.flkty = new Flickity(this.$refs.carousel, {
        wrapAround: true,
        initialIndex: this.currIndex
      }))
      flkty.on('change', e => {
        this.move(e)
      })
      this.getData(new Date())
      // 获取当月上课情况
      this.getHaveClassDayArrData(new Date())
    },

    // 选择时间
    selectTime(value) {
      if (this.selected.time !== value.time) {
        this.selected = value
      }
    },

    // 前一页
    prev() {
      this.flkty.previous()
    },

    // 后一页
    next() {
      this.flkty.next()
    },

    // 返回今天
    reset() {
      this.haveClassDay = {}
      this.currIndex = 1
      this.flkty.destroy()
      this.init()
    },

    move(current) {
      const isRightMoveOver = this.currIndex === this.swiperLength && current === 0
      const sign = (current > this.currIndex && !(this.currIndex === 0 && current === this.swiperLength)) || isRightMoveOver ? 1 : -1
      this.currIndex = current
      this.jiSuanTime(sign)
    },

    // 计算用户滑动之后的时间
    jiSuanTime(sign) {
      let year = this.showCurrTime.year
      let month = this.showCurrTime.month + sign
      const monthEQ0 = month === 0

      if (monthEQ0 || month > 12) {
        year += sign
        month = monthEQ0 ? 12 : 1
      }

      const date = new Date(`${year}/${month}/1`)
      // 获取当月上课情况
      this.getHaveClassDayArrData(date)
      // 不受当月课程有没有课影响 直接计算天数
      this.getData(date, sign)
    },

    // 获取当月上课情况
    getHaveClassDayArrData(date) {
      this.$http({
        isMultipleSelf: 'replacePrev',
        name: 'getHaveClassDayArrData',
        url: '/TimeTable/scheduleTable',
        data: {
          dateTime: `${date.getFullYear()}-${date.getMonth() + 1}-1`,
          type: 1,
          teacher_id: this.teacher_id || ''
        },
        callback: ({ data: { haveClassDayArr = [] } }) => {
          this.haveClassDay = Object.assign({}, this.haveClassDay, {
            [date.getMonth() + 1]: haveClassDayArr
          })
        }
      })
    },

    // 获取下一页的index
    getNextIndex(sign) {
      return (this.currIndex + sign + this.names.length) % this.names.length
    },

    // 获取不同的数据
    getData(time, sign) {
      if (sign) {
        const changeDataName = this.names[this.getNextIndex(sign)]
        this[changeDataName] = this.getListTimeDate(new Date(time.getFullYear(), time.getMonth() + sign, 1))
      } else {
        this.prevMonth = this.getListTimeDate(new Date(time.getFullYear(), time.getMonth() - 1, 1))
        this.currMonth = this.getListTimeDate(time)
        this.nextMonth = this.getListTimeDate(new Date(time.getFullYear(), time.getMonth() + 1, 1))
      }

      this.showCurrTime = {
        value: `${time.getFullYear()}年${this.numberFull10(time.getMonth() + 1)}月`,
        year: time.getFullYear(),
        month: time.getMonth() + 1
      }
    },

    // 获取列表显示的时间数据
    getListTimeDate(date) {
      let dateList = []
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      // 当月数据
      const currMonthData = new Date(year, month, 0)
      // 当月最大天数
      const currMaxDay = currMonthData.getDate()
      // 剩余天数
      const daysRemaining = (currMaxDay - currMonthData.getDay()) % 7
      // 当前时间
      const newDate = new Date()

      for (let i = 1; i <= currMaxDay; i += 1) {
        const t = this.numberFull10(i)
        const itemDate = new Date(`${year}/${month}/${t}`)
        const time = `${year}-${this.numberFull10(month)}-${t}`
        dateList.push({
          time,
          year,
          month,
          date: time === `${newDate.getFullYear()}-${this.numberFull10(newDate.getMonth() + 1)}-${newDate.getDate()}` ? '今' : t,
          id: Math.random(),
          day: itemDate.getDay(),
          // 是否超过了当前时间
          isEffective: itemDate.getTime() >= new Date(`${newDate.getFullYear()}/${newDate.getMonth() + 1}/${newDate.getDate()}`).getTime()
        })
      }
      // 填充一些数据
      if (daysRemaining > 0) {
        dateList = new Array(7 - daysRemaining).map(() => undefined).concat(dateList)
      }
      return dateList
    },

    // 填充小于10的0前缀
    numberFull10(value) {
      return value < 10 ? `0${value}` : value
    }
  }
}
</script>
<style scoped lang="scss">
.course-table-time-list {
  padding: 3rem 0 0;
  background-color: #fff;
}
.cycle {
  font-size: 0;
  padding-bottom: 12px;
  span {
    width: 14.285%;
    font-weight: 400;
    font-size: 0.5rem;
    text-align: center;
    line-height: 0.7rem;
    vertical-align: top;
    display: inline-block;
    color: rgba(153, 153, 153, 1);
  }
}
.course-table-container {
  outline: 0;
  width: 500px;
  height: 370px;
  overflow: hidden;
  user-select: none;
  position: relative;
  white-space: nowrap;
  .item {
    font-size: 0;
    width: 100%;
    height: 100%;
    white-space: normal;
    .time {
      width: 14.285%;
      padding: 4px 0;
      vertical-align: top;
      display: inline-block;
      position: relative;
      .text {
        width: 50px;
        height: 50px;
        display: block;
        margin: 0 auto;
        cursor: pointer;
        font-size: 0.7rem;
        font-weight: 500;
        text-align: center;
        border-radius: 4px;
        line-height: 50px;
        position: relative;
        color: rgba(51, 51, 51, 1);
        &.disable {
          color: #a6a6a6;
        }
      }
      .selected {
        width: 50px;
        height: 50px;
        color: #fff !important;
        border-radius: 4px;
        background: #329891;
        &:after {
          display: none;
        }
      }
    }
    .haveClassDay {
      color: #333;
      background-color: rgba(50, 152, 145, 0.1);
      &.haveClassBlue {
        color: #329891;
      }
    }
  }
}
/**选中时间**/
.selected-time {
  font-size: 0;
  position: absolute;
  top: 0.525rem;
  left: 50%;
  z-index: 5;
  transform: translate(-50%);
  .time {
    color: #4a4a4a;
    font-weight: bold;
    font-size: 0.4rem;
    line-height: 0.9rem;
  }
  .prev,
  .next {
    cursor: pointer;
    width: 66px;
    height: 30px;
    background: url('../../assets/img/course_table/jt.png') no-repeat center;
    background-size: 6px 10px;
    &:last-child {
      transform: rotate(180deg);
    }
  }
}
.return-curr-date {
  cursor: pointer;
  position: absolute;
  right: 13px;
  top: 0;
  z-index: 3;
  height: 2.1rem;
  width: 2.2rem;
  background: url('../../assets/img/course_table/ico_fhjt@2x.png') no-repeat center center;
  background-size: 0.8rem;
}
.flickity-slider {
  width: 100%;
  height: 100%;
  white-space: nowrap;
}
.carousel-cell {
  position: absolute;
  width: 100%;
  height: 100%;
}
.flickity-viewport {
  height: 100% !important;
}
</style>