效果

html 代码

<div id="calendar" class="lt">
                          <ul class="weekdays">
                              <li>一</li>
                              <li>二</li>
                              <li>三</li>
                              <li>四</li>
                              <li>五</li>
                              <li style="color:red">六</li>
                              <li style="color:red">日</li>
                          </ul>
                          <div class="arrDays">
                              <div  v-for="dayList in arrDays" class="calendarData">
                                  <div style="" class="years">
                                      {{dayList.year}}年{{dayList.moth}} 月
                                      <span style="display: none;">
                                          <span class="timeHide" v-if="dayList.moth>9">
                                              {{dayList.year}}-{{dayList.moth}}
                                          </span>
                                          <span v-else class="timeHide">{{dayList.year}}-0{{dayList.moth}}</span>
                                      </span>
                                      
                                  </div>
                                  <ul class="days">
                                     <li v-for="(day,index) in dayList.days"><!--@click="selectDay()" -->
                                       <!--今天-->
                                       <span v-if="day!=''">
                                               <span v-if="day.getFullYear() == new Date().getFullYear() 
                                                   && day.getMonth() == new Date().getMonth() 
                                                   && day.getDate() == new Date().getDate()" class="curDay active">{{day.getDate()}}</span>
                                            <span v-else class="curDay">{{ day.getDate() }}</span>
                                       </span>
                                           
                                    </li>
                                  </ul>
                              </div>
                              
                          </div>
                          
                        </div>

css 代码

#calendar{
    border: 1px solid #dfe6ec;
    width: 440px;
  }
  .month {
      width: 420px;
      background: #eef1f6;
     
  }
   
  .month ul {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: space-between;
      color: #374453;
  }
   
  .year-month {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
  }
   
  /*.year-month:hover {
      background: rgba(150, 2, 12, 0.1);
  }*/
   
  .choose-year {
      padding-left: 20px;
      padding-right: 20px;
  }
   
  .choose-month {
      text-align: center;
      font-size: 16px;
  }
   
  .arrow {
      padding: 30px;
  }
  .month ul li {
       color: #374453;
      font-size: 16px;
      text-transform: uppercase;
      letter-spacing: 3px;
  }
   
  .weekdays {
      margin: 0;
      padding: 10px 0;
      background: #eef1f6;
      display: flex;
      flex-wrap: wrap;
      color: #FFFFFF;
      justify-content: space-around;
      width:100%;
      color: #374453;
      padding-right: 17px;
      background: #eef1f6;
  }
   
  .weekdays li {
      display: inline-block;
      width: 13.6%;
      text-align: center;
  }
   
  .days {
      padding: 0;
      background: #FFFFFF;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      height: 100%;
      width: 420px;
  }
   
  .days li {
      list-style-type: none;
      display: inline-block;
      width: 14.2%;
      text-align: center;
      font-size: 1rem;
      
  }
   .days li span{
           display: inline-block;
           color: #000;
      cursor: pointer;
      vertical-align: middle;
      height: 50px;
      line-height: 50px;
      width: 50px;
      border-radius: 25px;
   }
  .days li span .active {
      width: 50px;
      border-radius: 25px;
      background: #0097FF;
      color: #fff;
      display: inline-block;
         
  }
   
  .days li .other-month {
      padding: 5px;
      color: darkgrey;
  }
   
  .days li span:hover {
      background: #0097FF;
      color: #FFFFFF;
  }
  .arrDays{
      height:458px;
      overflow-y: auto;
  }
  .years{
      height: 30px;
      line-height: 30px;
      text-align: left;
      padding: 0 10px;
      color: #0097FF;
  }

js  代码

data(){
        return{
            currentDay: '',
            currentMonth: '',
            currentYear: '',
            currentWeek: '',
            days: [],
            thisYear:null,
            thisMonth:null,
            arrDays:[],
        }
    },

mounted(){
        var date=new Date()
        self.currentDay = date.getDate();
        self.currentYear = date.getFullYear();
        self.currentMonth = date.getMonth() + 1;
        self.currentWeek = date.getDay(); // 1...6,0
        this.days=[]
        var month=date.getMonth() + 1;
        var year=date.getFullYear();
        for(var i=0;i<12;i++){
            console.log(month)
            if(i==0){
                this.initData(date);//获取当前时间
            }else{
                if(month>12){
                    this.initData(this.formatDate(year+1,month-12,1));
                }else{
                    this.initData(this.formatDate(year,month,1));
                }
            }
            month+=1
            
        }
        $('#calendar').on('click','.curDay',function(){
            console.log(123)
            $(this).addClass('active')
            console.log($(this).text())
            console.log($(this).parents('.days').siblings('.years').find('.timeHide').text().replace(/(^\s*)|(\s*$)/g, ""))
            $(this).parents('li').siblings().find('.curDay').removeClass('active')
            $(this).parents('.calendarData').siblings().find('.curDay').removeClass('active')
        })
    },

methods:{
        addInfo(){//
            this.isShow=!this.isShow
        },
        closeModel(){
            this.isShow=!this.isShow
        },
        initData(cur){
            var self=this
            var date = new Date(cur);

               var currentDay = date.getDate();
               var currentYear = date.getFullYear();
               var currentMonth = date.getMonth() + 1;
               var currentWeek = date.getDay(); // 1...6,0

               if (currentWeek == 0) {//星期天
                currentWeek = 7;
               }
           var str = this.formatDate(currentYear , currentMonth, currentDay);
           var arr=[]
          
            var str = this.formatDate(currentYear , currentMonth, currentDay);
               this.days.length = 0;
           // 今天是周日，放在第一行第7个位置，前面6个
               for (var i = currentWeek - 1; i >= 0; i--) {
                var d = new Date(str);
                d.setDate(d.getDate()-i);
                if(i==0){
                    arr.push(d);
                }else{
                    arr.push('');
                }
               }
           for (var i = 1; i <= 42 - currentWeek; i++) {
                var d = new Date(str);
                d.setDate(d.getDate() + i);
                if(currentMonth==(d.getMonth()+1)){
                    arr.push(d);
                }
               
           }
           var obj={}
           obj.moth=currentMonth
           obj.days=arr
           obj.year=currentYear
           self.arrDays.push(obj)
        },
        formatDate(year,month,day){
           var y = year;
           var m = month;
           if(m<10) m = "0" + m;
           var d = day;
           if(d<10) d = "0" + d;
           return y+"-"+m+"-"+d
        },

    }