自定义横向滚动日历

<template>
  <div class="plan">
	<div class="calendar" id="calendar">
        <div class="list">
          <li v-for="(item, index) in calendarData" :key="index" :class="{ active: item.day == currentDate }">
            <div class="week">{{ item.week }}</div>
            <div>{{ item.day }}</div>
          </li>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentFirstDate: '',
      calendarData: [], //日历
      nextDay: 0, //当前日期的后一天
      currentDate: '', //当前几号
      today: {}, //当前日期
      weekIndex: 0, //weekIndex为0时表示当前周，递增或递减时周数也递增或递减
    }
  },
  created() {
    this.getWeekDate()
    this.getOneWeekDate(-5)
    this.getOneWeekDate(-4)
    this.getOneWeekDate(-3)
    this.getOneWeekDate(-2)
    this.getOneWeekDate(-1)
    this.getOneWeekDate(0)
    this.$nextTick(() => {
      document.getElementById('calendar').scrollLeft = 1300
    })
  },
  mounted() {
    this.calendarData = this.calendarData.slice(-30)
  },
  methods: {
    //点击每一天获取数据
    getdatelist(e) {
      if (this.isPlan != '0' && this.isPlan != '2') {
        this.currentDate = e.day
        this.searchPlanSkill(e)
      }
    },
    //获取一个月的日期
    getOneWeekDate(index) {
      this.weekIndex = index
      this.setDate(new Date())
      var calendar = this.setDate(this.addDate(this.currentFirstDate, 7 * index))
      this.calendarData = this.calendarData.concat(calendar)
    },
    setDate(date) {
      var week = date.getDay() - 1
      date = this.addDate(date, week * -1)
      this.currentFirstDate = new Date(date)
      var datearr = []
      if (this.weekIndex == '0') {
        if (this.nextDay == '8') {
          for (var i = 0; i < 1; i++) {
            var a = this.formatDate(i == 0 ? date : this.addDate(date, 1)) //星期一开始
            datearr.push(a)
          }
        } else {
          for (var i = 0; i < this.nextDay; i++) {
            var a = this.formatDate(i == 0 ? date : this.addDate(date, 1)) //星期一开始
            datearr.push(a)
          }
        }
      } else {
        for (var i = 0; i < 7; i++) {
          var a = this.formatDate(i == 0 ? date : this.addDate(date, 1)) //星期一开始
          datearr.push(a)
        }
      }
      return datearr
    },
    addDate(date, n) {
      date.setDate(date.getDate() + n)
      return date
    },
    formatDate(date) {
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      var week = ['日', '一', '二', '三', '四', '五', '六'][date.getDay()]
      return { month: month, day: day, week: week, year: year }
    },
    getWeekDate() {
      var now = new Date()
      var day = now.getDay()
      var weekdays = new Array('7', '1', '2', '3', '4', '5', '6')
      var chineseWeekdays = new Array('日', '一', '二', '三', '四', '五', '六')
      this.nextDay = parseInt(weekdays[day]) + 1
      this.currentDate = now.getDate()
      this.today = {
        year: now.getFullYear() + '年',
        month: now.getMonth() + 1,
        day: now.getDate(),
        week: chineseWeekdays[day],
      }
    },
  },
}
</script>
<style lang="less">
 .calendar {
    padding-left: 20px;
    height: 60px;
    overflow: hidden;
    overflow-x: scroll;
    width: 100%;
    .list {
      width: 1350px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        width: 33px;
        height: 54px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.6);
        padding-top: 5px;
        .week {
          font-size: 11px;
          font-weight: 400;
          margin-bottom: 5px;
        }
      }
      .active {
        background: #ff783e;
        border-radius: 16px;
        color: #ffffff;
      }
    }
  }
</style>

效果如下