基于vue.js element-ui 的日历控件核心代码

基于vue element-ui 的日历控件核心代码
效果图:

<div class="calendar">
                        <!-- 年份 月份 -->
                        <div class="month">
                            <div class="currentdate">
                                <span class="choose-year">{{ currentYear }}年</span>
                                <span class="choose-month">{{ currentMonth }}月</span>
                            </div>
                            <div class="choose">
                                <span @click="goCurrentMonth(currentYear,currentMonth)" class="gotoday">今天</span>
                                <span @click="pickPre(currentYear,currentMonth)">❮</span>
                                <span @click="pickNext(currentYear,currentMonth)">❯</span>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <!-- 星期 -->
                        <div class="caldate">
                            <ul class="weekdays">
                                <li>周一</li>
                                <li>周二</li>
                                <li>周三</li>
                                <li>周四</li>
                                <li>周五</li>
                                <li>周六</li>
                                <li>周日</li>
                            </ul>
                            <!-- 日期 -->
                            <ul class="days">
                                <!-- v-for循环 每一次循环用<li>标签创建一天 -->
                                <li v-for="dayobject in days">
                                    <template>
                                        <!-- 非当前月份 -->
                                        <div class="other-month" v-if="dayobject.day.getMonth()+1 != currentMonth">
                                            {{ dayobject.day.getDate() }}
                                        </div>
                                        <!-- 当前月 -->
                                        <div class="everyday" v-if="dayobject.day.getMonth()+1 == currentMonth">
                                            <span class="datenumber">{{ dayobject.day.getDate()}}</span>
                                            
											<template>
                                                <template v-for="obj in leftobj">
                                                    <template v-if="new Date(obj.orderDate).getDate() === dayobject.day.getDate()">
                                                        <template v-if="obj.number > obj.reservations">
                                                            <div class="usual">
                                                                <p>{{obj.number}}</p>
                                                                <p>{{obj.reservations}}</p>
                                                            </div>
                                                        </template>
                                                        <template v-else>
                                                            <div class="fulled">
                                                                <p>{{obj.number}}</p>
                                                                <p>{{obj.reservations}}</p>
                                                                <p>高亮</p>
                                                            </div>
                                                        </template>
                                                    </template>
                                                </template>
                                                <button v-if="dayobject.day > today" @click="handleOrderSet(dayobject.day)" class="orderbtn">设置</button>
                                            </template>
											
                                        </div>
                                    </template>
                                </li>
                            </ul>
                        </div>
                    </div>

 <script>
        new Vue({
            el: '#app',
            data:{
                today:new Date(),//当前日期
                currentDay: 1,
                currentMonth: 1,
                currentYear: 1970,
                currentWeek: 1,
                days: [], //用于装载日历展示的日期
                leftobj: []//用于装载页面显示的月份已经进行预约设置的数据
            },
            created: function () {//在vue初始化时调用
                this.initData(null);
            },
            methods: {
                //初始化当前页要展示的日期
				initData: function (cur) {
                    var date;
                    var num;     //展示页中日期的数目
                    //控制预定设置相对于当前日期延后的数
                    var index = 2;
                    var today = new Date();
                    this.today = new Date(this.formatDate(today.getFullYear(),today.getMonth()+1,today.getDate()+index));
                    //定义正则表达式,表示大月
                    var rep = /^(1|3|5|7|8|10|12)$/  ;
                    if (cur) {
                        date = new Date(cur);
                        var monthIndex = date.getMonth()+1;
                        if ((date.getDay()==0&&monthIndex!=2)||(date.getDay()==6&&rep.test(monthIndex))){
                            num=42;
                        }else if(date.getDay()==1&&monthIndex==2&&(date.getFullYear()/4!=0)){
                            num=28;
                        } else{
                            num=35;
                        }
                    } else {
                        var now = new Date();
                         date = new Date(this.formatDate(now.getFullYear(), now.getMonth()+1, 1));
                        var monthIndex = date.getMonth()+1;
                        //通过判断计算出将本月所有天数全部展示的最小周数对应的天数
                        if ((date.getDay()==0&&monthIndex!=2)||(date.getDay()==6&&rep.test(monthIndex))){
                            //要展示全改年改月的所有天数,需要6周即42天(一号为星期天且月份不为2月或者一号为星期六且月数为31天的月)
                            num=42;
                        }else if(date.getDay()==1&&monthIndex==2&&(date.getFullYear()/4!=0)){
                            //要展示全改年改月的所有天数,需要4周即28天(一号为星期一且改月为平年的2月)
                            num=28;
                        } else{
                            //要展示全改年改月的所有天数,需要5周即35天(一号在星期六之前或则一号为星球六但月数为30天的月)
                            num=35;
                        }
                    }
                    this.currentDay = date.getDate();
                    this.currentYear = date.getFullYear();
                    this.currentMonth = date.getMonth() + 1;
                    this.currentWeek = date.getDay(); // //本月第一天是周几（周日0 周六 6）
                    //将星期天的index数替换成7,便于后面就算
                    if (this.currentWeek == 0) {
                        this.currentWeek = 7;
                    }
                    //格式化每个月的第一号
                    var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
                    //清空days中的数据
                    this.days=[];
                    //将每个月一号所在的位置确定并且补全第一周不是本月的日期
                    // (确定一号所在的位置就可以就算出其他所有日期的位置)
                    for (var i = this.currentWeek - 1; i >= 0; i--) {
                        //获得这个月第一天的日期
                        var d = new Date(str);
                        //获得日历展示中上个月的日期
                        d.setDate(d.getDate() - i);
                        //创建一个json对象存放日期
                        var dayobject = {};
                        //将得到的日期复制给对象的day属性
                        dayobject.day = d;
                        //将对象添加到days集合中
                        this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用
                    }
                    //其他周
                    for (var i = 1; i <= num - this.currentWeek; i++) {
                        //获得这个月第一天的日期
                        var d = new Date(str);
                        //获得日历展示本月一号后以及下个月的日期
                        d.setDate(d.getDate() + i);
                        //创建一个json对象存放日期
                        var dayobject = {};//dayobject   {day:date,index:2}
                        //将得到的日期复制给对象的day属性
                        dayobject.day = d;
                        //将对象添加到days集合中
                        this.days.push(dayobject);
                    }

                    // 根据当前月发送异步求情查询数据
                    axios.post("/ordersetting/findAll.do?date="+this.currentYear+"-"+this.currentMonth).then((res)=>{
                        if (res.data.flag){
                            this.leftobj=res.data.data;
                        } else{
                            this.$message.error(res.data.message);
                        }
                    });

                },
				//切换到当前月份的一号
                goCurrentMonth: function (year, month) {
                    //获得今天的日期,用于得到今天的年份与月份
                    var d = new Date();
                    this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                },
				//向前一个月
                pickPre: function (year, month) {
                    // setDate(0); 上月最后一天
                    // setDate(-1); 上月倒数第二天
                    // setDate(dx) 参数dx为 上月最后一天的前后dx天
                    var d = new Date(this.formatDate(year, month, 1));
                    //将日期往前移动一天,用于得到上个月年份与月份
                    d.setDate(0);
                    //调用初始化日历的方法,并将日期设置为上个月的一号
                    this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                },
				//向后一个月
                pickNext: function (year, month) {
                    var d = new Date(this.formatDate(year, month, 1));
                    //将日期往后移动31天,用于得到下个月年份与月份
                    d.setDate(32);//获取指定天之后的日期
                    //调用初始化日历的方法,并将日期设置为下个月的一号
                    this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                },
                // 返回 类似 2016-01-02 格式的字符串
                formatDate: function (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
                }
            }
        })
    </script>