vue 日历组件

效果图：

html

<template>
  <div class="box">
    <div class="searchTop">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="时间">
          <el-date-picker
            v-model="form.value"
            type="month"
            placeholder="选择月"
            @change="changeMonth">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>
    <div class="monthList">
      <div class="weekDay">
        <div class="day" v-for="(item,index) in weekDay" :key="index">
          {{ item }}
        </div>
      </div>
      <div class="weekList">
        <ul>
          <li v-for="(item,ss) in monthDay" :key="ss">
            <div class="dayTitle">
              {{ item.day }}
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

 script

<script>
export default {
  data() {
    return {
      form: {
        value: new Date(), 
      },
      weekDay: [
        "周一","周二","周三","周四","周五","周六","周日",
      ],
      monthDay: []
    };
  },
  created() {
    this.init(new Date());
  },
  methods: {
    changeMonth(e) {
      this.init(e);
    },
    // 获取当月的第一天
    getCurrentMonthFirst(val){
      var date = val;
      date.setDate(1);
      return date;
    },
    init(val) {
      // 置空日历
      this.monthDay = [];
      let that = this;
      // 获取传入的时间戳
      let nowDate = val;
      // 获取传入的年
      let year = val.getFullYear();
      // 获取传入的月
      let month = nowDate.getMonth();
      // 获取传入的月有多少天
      let allDays = new Date(year,month + 1, 0).getDate();
      // 获取传入的月第一天的时间戳
      let nowMonthDay = new Date(this.getCurrentMonthFirst(val));
      // 获取传入的月第一天是周几
      let nowMonthWeek = nowMonthDay.getDay();
      // 周天是0  所以做三目判断 让礼拜天成为7
      nowMonthWeek = nowMonthWeek == 0 ? 7 : nowMonthWeek;
      // 获取当天 的 年月日
      let nowyear = new Date().getFullYear();
      let nowMonth = new Date().getMonth();
      let nowDay = new Date().getDate();
      
      let num = 1; //用于每天+1
      let numIndex = 0; // 用于循环行数
      // 传入月的天数 + 传入月第一天的周几 
      if(nowMonthWeek + allDays < 30) {
        numIndex = 29; // 展示4行 一行7个
      }else if(nowMonthWeek + allDays < 36){
        numIndex = 36; // 展示5行 一行7个
      }else {
        numIndex = 42;
      }

      for(let i = 1; i < numIndex; i++) {
        let obj = {};
        obj.index = i;
        // 当前日的格子
        if(i >= nowMonthWeek && num <= allDays) {
          obj.day = month + 1 + "月" + num + "日";
          num++;
        }
        that.monthDay.push(obj);
      }
    }
  }
}
</script>

css

<style scoped lang="scss">
.box {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .searchTop {
    border-bottom: 1px solid rgb(211, 211, 211);
    margin-bottom: 20px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    box-sizing: border-box;

    ::v-deep .el-form-item {
      margin-bottom: 0;
    }
  }

  .monthList {
    flex: 1;
    display: flex;
    flex-direction: column;

    .weekDay {
      display: flex;
      align-items: center;
      padding-right: 16px;
      background: #1b7cd1;
      box-sizing: border-box;

      .day {
        flex: 1;
        color: #fff;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
      }
    }

    .weekList {
      flex: 1;
      position: relative;
      margin-bottom: 20px;

      ul {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        overflow-y: auto;
        display: flex;
        margin: 0;
        padding: 0;
        flex-wrap: wrap;

        &::-webkit-scrollbar {/*滚动条整体样式*/
          width: 8px;/*高宽分别对应横竖滚动条的尺寸*/
          height: 8px;
        }
        
        &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
          border-radius: 5px;
          -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
          background:rgba(0,0,0,0.2);  /*设置滚动条颜色*/
          }

        li {
          list-style: none;
          width: 14.2%;
          height: 300px;
          border-right: 1px solid rgb(211, 211, 211);
          border-bottom: 1px solid rgb(211, 211, 211);
          display: flex;
          flex-direction: column;
          padding: 10px;
          box-sizing: border-box;

          &:nth-child(7n+1) {
            border-left: 1px solid rgb(211, 211, 211);
          }

          .dayTitle {
            font-size: 16px;
            text-align: right;
          }
        }
      }
    }
  }
}
</style>