显示多个月日历的实现

• 在当前月基础上往后延伸，可自由配置显示几个数

注意点：

1. 已过去时间的判断
2. 当天的判断
3. 跨年的判断

<div id="app">
        <div class="title">
            <span v-for="item in week">{{item}}</span>
        </div>
        <div class="calendarARR" v-for="value in calendarARR">
            <div class="year-hd">{{ value.title }}</div>
            <div class="box">
                <div class="date-num" @click="clickBlock(item)" v-for="(item,index) in value.list" :class="{'weekColor': item.isWeekDay,'curDate': item.isToday,'passDay':item.isPass, 'clickColor': sel === item.ymd,
}">{{ item.day }}</div>
<!--'clickColor': start === item.ymd || end == item.ymd,'area':(start<item.ymd)&&(item.ymd<end)
-->
            </div>
        </div>
    </div>

    data() {
            return {
                week:['日','一','二','三','四','五','六'],
                calendarARR: [],
                sel: '',
                start: '',
                end: ''
            }
        }
methods: {
makeCalendar(year,month){
                let now = new Date()
                let y = now.getFullYear() 
                let m = now.getMonth()
                let d = now.getDate()  
                let now1 = new Date(y,m,d)
                let week = now.getDay()  //星期五
                let endDay = new Date(year,month,0)//下个月的第0天，也说是上个月的最后一天,便可以知道最后一天是几号,是星期几
                let lastDay = endDay.getDate() //*这个月总天数
                let lastWeed = endDay.getDay() //最后一天周几
                console.log(lastWeed)
                // let firstWeek = new Date(now.setDate(1))//当前月第1天日期对象
                let weekobj = new Date(year,month-1,1) //实例化第一天，作用和上一句相同，参数2，实际上是3月，注意这一点
                let firstWeek = weekobj.getDay() //第1天周几 即可知道前面空几个
                let objmonth = []
                for(let i = 1;i<=lastDay;i++){
                    let _now = new Date(year,month-1,i)
                    let _y = _now.getFullYear()
                    let _m = _now.getMonth()
                    let _d = _now.getDate()
                    let _week = _now.getDay()
                    let objday = {
                        ymd: `${_y}-${this.transeNum(_m)}-${this.transeNum(_d)}`,
                        day: _d,
                        week: _week,
                        isWeekDay: _week==0 || _week==6,
                        isToday: now1.getTime() == _now.getTime(),
                        isPass: now1.getTime() > _now.getTime()
                    }
                    objmonth.push(objday)
                }
                for(let i = 0;i<firstWeek;i++){
                    objmonth.unshift({})
                }
                return objmonth //此处注意一定要有返回值
            },
            transeNum(num){
                return num < 10 ? '0' + num :num
            },
            loadMonths(y,m,n){
                for(let i = 0;i<n;i++){
                    if(m > 12){
                        y = y + 1      //跨年处理
                        m = m - 12     //跨年处理
                    }
                    let a = {
                        title: `${y}-${this.transeNum(m)}`,
                        list: this.makeCalendar(y,m)   //对象value为方法的返回值
                    }
                    this.calendarARR.push(a)
                    m = m + 1
                }
            },
            clickBlock(item){
                this.sel = item.ymd
                console.log(item.ymd)
            }
     }
    //函数调用 参数代表：年 月 显示几个月
        mounted() {
            this.loadMonths(2019,3,2)
        }


//选中某一区间
        clickBlock(item){
                if(item.isPass || item.day == null ) return
                if(!this.start){
                    this.start = item.ymd
                    return
                }
                if(this.start && !this.end){
                    if(item.ymd>this.start){
                        this.end = item.ymd
                    }else{
                        this.start=item.ymd
                    }
                    return
                }
                if(this.start && this.end){
                    this.start = item.ymd;
                    this.end = ''
                }
            }

image.png
image.png