简单实现日历

1.html部分

简单实现日历，未做css样式修改

<template>
  <div>
    <el-date-picker
      v-model="dateTime"
      type="month"
      value-format="yyyy-MM"
      @change="handleChangeDate"  
    >
    </el-date-picker>
    <br/>
    <div class="_date">
      <!-- 星期 -->
      <ul class="_week">
        <li v-for="(item,index) in weekTexts" :key="index">{{item}}</li>
      </ul>
      <!-- 日期 -->
      <ul class="_day">
        <li v-for="item in totalMonthDays" :key="item">{{item.date.slice(-2)}}</li>
      </ul>
    </div>
  </div>  
</template> 

2.js部分

export default {
  name: 'dateTime',
  data() { 
    return {
      dateTime:new Date(),
      curYear:0,
      curMonth:0,
      curDate:0,
      weekTexts:['日','一','二','三','四','五','六'],
      currentMonDays:0,//当月天数
      lastMonDays:0,//上月天数
      totalMonthDays:[]
    }
  },
  methods:{
    /**
     * 选择时间
     */
    handleChangeDate(date){
      this.curYear = date.slice(0,4);
      this.curMonth = date.slice(-2);
      this.calcMonthDays();
    },
    /**
     * 根据年月获取当月总天数
     */
    byMonthGetDays(year,month){
      return new Date(year,month,0).getDate();
    },
    /**
     * 根据年月获取每月1号周几
     */
    byMonthGetWeek(year,month){
      return new Date(year,month - 1,1).getDay();
    },
    /**
     * 小于10,填充0
     */
    fillZero(num){
      return num < 10 ? '0'+num : num
    },
    /**
     * 第一次加载数据
     */
    initCurrentDate(){
      let dateTime = new Date();
      this.curYear = dateTime.getFullYear();
      this.curMonth = this.fillZero(dateTime.getMonth() + 1);
      this.curDate = this.fillZero(dateTime.getDate());
      this.calcMonthDays();
    },
    /**
     * 初始化天数
     */
    initMonthDays(){
      this.currentMonDays = this.byMonthGetDays(this.curYear,this.curMonth);
      if(this.curMonth < 2){
        this.lastMonDays = this.byMonthGetDays(this.curYear - 1,12);
      }else{
        this.lastMonDays = this.byMonthGetDays(this.curYear,this.curMonth - 1);
      }
    },
    /**
     * 计算日期list
     */
    calcMonthDays(){      
      this.initMonthDays();
      let currentWeekByOne = this.byMonthGetWeek(this.curYear,this.curMonth);//根据年月获取每月1号周几
      // 上个月，年月获取
      let lastMonYear = '';
      let lastMonth = '';
      if(this.curMonth < 2){
        lastMonYear = this.curYear - 1;
        lastMonth = 12;
      }else{
        lastMonYear = this.curYear;
        lastMonth = this.fillZero(parseInt(this.curMonth) -1);
      };
      // 下个月，年月获取
      let nextMonYear = '';
      let nextMonth = '';
      if(this.curMonth > 11){
        nextMonYear = this.curYear + 1;
        nextMonth = '01';
      }else{
        nextMonYear = this.curYear;
        nextMonth = this.fillZero(parseInt(this.curMonth) + 1);
      };
      let that = this;
      // 上月剩余天数
      let lastMonthRestDays = [];
      let lastMonDays = this.lastMonDays;
      while(currentWeekByOne--){
        lastMonthRestDays.push({
          date:`${lastMonYear}-${lastMonth}-${that.fillZero(lastMonDays--)}`
        })
      };
      lastMonthRestDays.reverse();
      // 当月天数
      let startDay = 0;
      let currentMonthDays = [];
      let currentMonDays = this.currentMonDays;
      while(startDay < currentMonDays){
        currentMonthDays.push({
          date:`${that.curYear}-${that.curMonth}-${that.fillZero(++startDay)}`
        })
      };
      // 下月剩余天数
      let startNextDay = 0;
      let nextMonthRestDays = [];
      let totalDays = 42;
      let nextRestDays = totalDays - lastMonthRestDays.length - currentMonthDays.length;
      while(nextRestDays--){
        nextMonthRestDays.push({
          date:`${nextMonYear}-${nextMonth}-${that.fillZero(++startNextDay)}`
        })
      };
      // 汇总
      this.totalMonthDays = lastMonthRestDays.concat(currentMonthDays,nextMonthRestDays);
    }
  },
  created(){
    this.initCurrentDate();
  }
 }

3.css部分（简单样式，主要实现功能）

._date{
    box-sizing: content-box;
    border:1px solid rgba(0,0,0,.3);    
    display: inline-block;
    width:calc(7 * 50px)
  }
  ul._week{
    list-style: none;
    margin:0;
    padding:0;
    display: flex;
    border-bottom: 1px solid rgba(0,0,0,.3);
  }
  ul._week li{
    width:50px;
    text-align: center;
    line-height: 30px;
  }
  ul._day{
    list-style: none;
    margin:0;
    padding:0;
    display: flex;
    flex-wrap: wrap;
  }
  ul._day li{
    width:50px;
    text-align: center;
    line-height: 30px;
  }

4.效果图

5.结束总结

主要有三部分组成上月结余天数、当月天数、下月结余天数进行concat拼接。跟根据接口返回数据自行添加样式要求进行判断。（实现类似于如图）
结束，谢谢！