• vue.js
  • vue 日历插件

    admin 2个月前 46次点击 来自 vue.js

    效果图
    屏幕快照 2019-01-21 下午1.10.09.png

    具体代码如下
    单独插件文件
    Calendar.vue

     // 1970 1月1日 周四
    <template>
        <div id="calendar">
            <!-- 年份 月份 -->
            <div class="month">
                <span class="arrow arrow-left" @click="pickPre(currentYear,currentMonth)"></span>
                <span class="choose-year" v-if="currentYear != '1970'">{{ currentYear }}年</span>
                <span
                    class="choose-month"
                    @click="pickYear(currentYear,currentMonth)"
                >{{ currentMonth }}月</span>
                <span class="arrow arrow-right" @click="pickNext(currentYear,currentMonth)"></span>
            </div>
            <!-- 星期 -->
            <ul class="weekdays">
                <li>
                    <span>一</span>
                </li>
                <li>
                    <span>二</span>
                </li>
                <li>
                    <span>三</span>
                </li>
                <li>
                    <span>四</span>
                </li>
                <li>
                    <span>五</span>
                </li>
                <li>
                    <span>六</span>
                </li>
                <li>
                    <span>日</span>
                </li>
            </ul>
            <!-- 日期 -->
            <ul class="days" v-if="!isSelected">
                <!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
                <li v-for="(dayobject, index) in days" :class="dayobject.class" @click="selectDay(currentYear,currentMonth,dayobject.day.getDate(),dayobject)" :key="index"  >
        
                        <!--不属于本月的天  改变类名加灰色-->
                        <span
                            v-if="dayobject.day.getMonth()+1 < currentMonth"
                            class="other-month befor-other-month"
                        >{{ dayobject.day.getDate() }}</span>
    
                        <span
                            v-else-if=" dayobject.day.getFullYear() == currentYear && dayobject.day.getMonth()+1 > currentMonth"
                            class="other-month after-other-month"
                        >{{ dayobject.day.getDate() }}</span>
    
                        <span
                            v-else-if="checkDay(dayobject.day) == false"
                            class="other-active"
                        >{{ dayobject.day.getDate() }}</span>
                        <!--属于本月并且是当天-->
                        <span
                            v-else-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()"
                            class="active"
                        >{{ dayobject.day.getDate() }}</span>
                        <!-- 属于本月但不是当天 -->
                        <span v-else>{{ dayobject.day.getDate() }}</span>
                        <div class="text-div" v-html="dayobject.text">{{ dayobject.text }}</div>
                    
                </li>
            </ul>
           <ul class="days" v-if="isSelected">
                <!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
                <li v-for="(dayobject, index) in days" :class="dayobject.class" @click="selectDay(currentYear,currentMonth,dayobject.day.getDate(),dayobject)" :key="index"  >
        
                        <!--不属于本月的天  改变类名加灰色-->
                        <span
                            v-if="dayobject.day.getMonth()+1 != currentMonth"
                            class="other-month"
                        >{{ dayobject.day.getDate() }}</span>
    
                        <span
                            v-else-if="checkDay(dayobject.day) == false"
                            class="other-active"
                        >{{ dayobject.day.getDate() }}</span>
                        <!--属于本月并且是当天-->
                        <span
                            v-else-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()"
                            class="active"
                        >{{ dayobject.day.getDate() }}</span>
                        <!-- 属于本月但不是当天 -->
                        <span v-else>{{ dayobject.day.getDate() }}</span>
                        <div class="text-div" v-html="dayobject.text">{{ dayobject.text }}</div>
                    
                </li>
            </ul>
        </div>
    </template>
    
    <script>
    /**
     * Generated class for the Calendar.vue page.
     *
     * See https://www.chusentech.com for more info on
     * vue pages and navigation.
     * 提供服务机构:北京雏森科技有限公司
     * create by : Neo
     * create date : 2019-01-01
     */
    export default {
        name: "Calendar",
        props:["workdaysInList","prohibitTodays","isSelected"],
        data() {
            return {
                currentDay: 1,
                currentMonth: 1,
                currentYear: 1970,
                currentWeek: 1,
                days: [],
                backDays:[],
                holidays: [],
                workdays:[],
                workdaysIn: this.workdaysInList,
                isSelect: false
            };
        },
       
        watch: {
            currentDay(){
                console.log(this.currentDay)
            },
            workdaysInList(){
                if(this.workdaysInList != null){
                 this.workdaysIn = this.workdaysInList;
                 console.log(" 日历插件接收到的参数 workdaysInList ",this.workdaysInList)
                }
            },
            workdaysIn(){
            
                 if(this.workdaysIn.length == 0){
                    console.log(" 日历插件接收到的参数 workdaysIn ",this.workdaysIn);
                    console.log(" 清理日历数据 "); 
                    this.initData(null);
                 }else {
                    this.setWorkdays(this.workdaysIn);
                 } 
            },
            prohibitTodays(){
                //禁止点击距离当前时间天数
            },
            holidays(){
                 console.log(" holidays ",this.holidays);
            },
            isSelect(){
                console.log(" isSelect ",this.isSelect);
            },
            isSelected(){
                this.isSelect = this.isSelected;
                console.log(" isSelected ",this.isSelected);
            }
        },
        created: function() {
            var now = new Date();
            this.getHoliday(now.getFullYear(),null);
            // this.initData(null);
        },
        methods: {
            initData: function(cur) {
                var leftcount = 0; //存放剩余数量
                var date;
                var currentDate = new Date();
    
                if (cur) {
                    date = new Date(cur);
                } else {
                    var now = new Date();
                    var d = new Date(
                        this.formatDate(now.getFullYear(), now.getMonth(), 1)
                    );
                    d.setDate(35);
                    date =  new Date(
                        this.formatDate(now.getFullYear(), now.getMonth() + 1, 1)
                    );
                }
                this.currentDay = date.getDate();
                this.currentYear = date.getFullYear();
                this.currentMonth = date.getMonth() + 1;
    
                this.currentWeek = date.getDay(); // 1...6,0
                if (this.currentWeek == 0) {
                    this.currentWeek = 7;
                }
                var str = this.formatDate(
                    this.currentYear,
                    this.currentMonth,
                    this.currentDay
                );
              
                this.days.length = 0;
                // 今天是周日,放在第一行第7个位置,前面6个
                //初始化本周
                for (var i = this.currentWeek - 1; i >= 0; i--) {
                    var d = new Date(str);
                    d.setDate(d.getDate() - i);
                    var dayobject = {}; //用一个对象包装Date对象  以便为以后预定功能添加属性
                    dayobject.day = d;
                    for (var j = 0; j < this.holidays.length; j++) {
                        console.log("JSON.stringify(this.holidays[j].day) >= JSON.stringify(currentDate)",JSON.stringify(this.holidays[j].day) ,"  ", JSON.stringify(currentDate));
                        
                        if (
                            JSON.stringify(this.holidays[j].day) ==
                            JSON.stringify(d) && 
                            JSON.stringify(this.holidays[j].day) >=
                            JSON.stringify(currentDate)
                        ) {
                            dayobject.text = "休";
                            dayobject.class = "holiday";
                        }else if(
                            JSON.stringify(this.holidays[j].day) ==
                            JSON.stringify(d) &&
    
                            JSON.stringify(this.holidays[j].day) <
                            JSON.stringify(currentDate)
                        ){
                            console.log(" ======= ");
                            dayobject.text = "休";
                            if(this.isSelected){//是否允许选择
                                dayobject.class = "holiday";
                            }else {
                                dayobject.class = "befor-holiday";
                            }
                        }
                    }
                    for (var k = 0; k < this.workdays.length; k++) {
                        if (
                            JSON.stringify(this.workdays[k].day) ==
                            JSON.stringify(d)&&
    
                            JSON.stringify(this.holidays[j].day) >=
                            JSON.stringify(currentDate)
                        ) {
                            dayobject.text = "班";
                            dayobject.class = "workday";
                        }else if(
                            JSON.stringify(this.workdays[k].day) ==
                            JSON.stringify(d)&&
    
                            JSON.stringify(this.holidays[j].day) <
                            JSON.stringify(currentDate)
                        ){
                            dayobject.text = "班";
                            dayobject.class = "befor-workday";
                        }
                    }
                    this.days.push(dayobject); //将日期放入data 中的days数组 供页面渲染使用
                }
                //其他周
                for (var i = 1; i <= 35 - this.currentWeek; i++) {
                    var d = new Date(str);
                    d.setDate(d.getDate() + i);
                    var dayobject = {};
                    dayobject.day = d;
                    for (var j = 0; j < this.holidays.length; j++) {
                        if (
                            JSON.stringify(this.holidays[j].day) ==
                            JSON.stringify(d)
                        ) {
                            dayobject.text = "休";
                            dayobject.class = "holiday";
                        }
                    }
    
                    for (var k = 0; k < this.workdays.length; k++) {
                        if (
                            JSON.stringify(this.workdays[k].day) ==
                            JSON.stringify(d)
                        ) {
                            dayobject.text = "班";
                            dayobject.class = "workday";
                        }
                    }
                    this.days.push(dayobject);
                }
                this.backDays = this.days;
                this.setWorkdays(this.workdaysIn);
            },
            checkDay(day){
                if(this.isSelected){
                    return true;
                }
                var now = new Date();
                var days = now.getTime() - day.getTime();
                var time = parseInt(days);
                if(time <= -1){
                    // console.log(" true day ",day );
                    return  true ;
                }else {
                    // console.log(" false day ",day );
                    return false;
                }
                
            },
            selectDay: function(year, month, day,dayobject) {
                if(this.checkDay(dayobject.day)){
                    //禁止选择以前天
                    var obj = event.currentTarget;
                    console.log(" 点击日期事件 ",year + "-" + month + "-" + day);
                    // obj.addClass("click-div");
                    this.$emit("selectDay",dayobject);
                }
            },
            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.getHoliday(d.getFullYear(),this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                // this.initData();
                // this.setWorkdays(this.workdaysIn);
            },
            pickNext: function(year, month) {
                var d = new Date(this.formatDate(year, month, 1));
                d.setDate(35);
                this.getHoliday(d.getFullYear(),  this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                // this.initData();
                // this.setWorkdays(this.workdaysIn);
            },
            pickYear: function(year, month) {
                console.log(year + "-" + month);
            },
            // 返回 类似 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;
            },
            setWorkdays(data){
                if(data != null){
                   for(var j = 0 ; j < this.days.length ; j++){
                         var dayobject = this.days[j];
                        for (var k = 0; k < data.length; k++) {
                            if ( 
                                 JSON.stringify(data[k].bookDate+"T00:00:00.000Z") == 
                                 JSON.stringify(dayobject.day)
                               ) {
                                // console.log( JSON.stringify(data[k].bookDate+"T00:00:00.000Z")+"  遍历日期 = " +JSON.stringify(dayobject.day));
                                var dayobjectWork = {};
                                dayobjectWork.day = new Date(data[k].bookDate + "T00:00:00.000Z");
                                dayobjectWork.text = "";
                                dayobjectWork.class = "workday";
                                dayobjectWork.objData = data[k];
    
                                let shang = "", xia = "",wan ="" ;
                                // console.log(" 准备更新日历 ", dayobjectWork.objData.bookData);
                                
                                 if(dayobjectWork.objData.bookData.length != 0){
                                    if(dayobjectWork.objData.bookData.status !=""){
                                        dayobjectWork.text = "满";
                                    }
                                    let tmp = dayobjectWork.objData.bookData.countList;
                                    for (let j = 0; tmp.length > j; j++) {
                                        if (tmp[j].timeTypeDictName == '上午'){
                                            shang = tmp[j].appointmentQuantity;
                                        }
                                        if (tmp[j].timeTypeDictName == '下午') {
                                            xia = tmp[j].appointmentQuantity;
                                        }
                                        if (tmp[j].timeTypeDictName == '晚午') {
                                            wan = tmp[j].appointmentQuantity;
                                        }
                                    }
                                    let lab="";
                                    if (shang != "" && xia != "" && wan != ""){
                                        lab = '<div class="timeTop">' + shang + '</div><div class="timeDown">' + xia + '/' + wan+'</div>';
                                    } else if (shang != "" && xia != "" && wan == ""){
                                        lab = '<div class="timeTop">' + shang + '</div><div class="timeDown">' + xia + '/' + 0 + '</div>';
                                    } else if (shang != "" && xia == "" && wan == "") {
                                        lab = '<div class="timeTop">' + shang + '</div><div class="timeDown">' + 0 + '/' + 0 + '</div>';
                                    } else if (shang == "" && xia != "" && wan == "") {
                                        lab = '<div class="timeTop">' + 0 + '</div><div class="timeDown">' + xia + '/' + 0 +  '</div>';
                                    } else if (shang == "" && xia == "" && wan != "") {
                                        lab = '<div class="timeTop">' + 0 + '</div><div class="timeDown">' + 0 + '/' + wan + '</div>';
                                    }
                                    dayobjectWork.text = lab ;
                                }
                               
                                this.days.splice(this.days.indexOf(dayobject),1,dayobjectWork);
                            }
                        }
                   }
                }
            },
            // 获取某年的假期列表
            getHoliday(year,currentDate) {
                let _this = this;
                this.$api.calendar
                    .getHoliday({
                        date:year
                    })
                    .then(function(res) {
                        console.log("返回 getHoliday 的数据为:",res);
                        if(res.responseMsg.code == 0){
                            let data = res.data;
                            for(let i = 0; i < data.length; i ++){
                                let {
                                    date="",
                                } = data[i];
                                let obj = {
                                    day: date + "T00:00:00.000Z",
                                }
                                _this.holidays.push(obj);
                            }
                            _this.initData(currentDate);
                            console.log("提取的数据为:",_this.holidays);
                        }
                    })
                    .catch(function(err) {
                        console.log(err);
                    });
            },
        }
    };
    </script>
    <style scoped>
    /*
      calendar.vue 插件样式
    */
    * {
        box-sizing: border-box;
    }
    #calendar {
        background: #fff;
    }
    .month {
        margin: 0 auto;
        text-align: center;
    }
    .choose-month {
        display: inline-block;
        min-width: 35px;
        font-size: 14px;
        color: #21cbb1;
        text-transform: uppercase;
    }
    .arrow {
        display: inline-block;
        width: 7px;
        height: 14px;
        background: rgba(0, 0, 0, 0.05);
        vertical-align: middle;
        margin: 0 30px;
    }
    .arrow-left {
        background: url(../assets/imgs/arrow_left.png) center/7px 13px no-repeat;
    }
    .arrow-right {
        background: url(../assets/imgs/arrow_right.png) center/7px 13px no-repeat;
    }
    .weekdays {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        border-bottom: 1px solid #efefef;
        font-size: 14px;
        color: #666;
        height: 46px;
    }
    .weekdays li {
        display: inline-block;
        width: 13.6%;
        text-align: center;
    }
    .weekdays li > span {
        display: inline-block;
        margin-top: 25px;
    }
    .days {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .days li {
        display: inline-block;
        width: 14.2%;
        height: 60px;
        text-align: center;
        font-size: 12px;
        color: #000;
        border-bottom: 1px solid #efefef;
    }
    .days li:nth-last-child(1),
    .days li:nth-last-child(2),
    .days li:nth-last-child(3),
    .days li:nth-last-child(4),
    .days li:nth-last-child(5),
    .days li:nth-last-child(6),
    .days li:nth-last-child(7) {
        border: none;
    }
    .days li > span {
        display: inline-block;
        width: 26px;
        height: 26px;
        line-height: 26px;
        border-radius: 50%;
        margin: 3px 0;
        color: #666;
    }
    .days .other-active:hover {
        color: #909090 !important;
        background: #ffffff ;
    }
    
    .days li.holiday {
        color: #e993b0;
    }
    .days li.holiday > span {
        background-color: #e993b0;
        color: #fff;
    }
    
    .days li.holiday > span:hover {
        background-color: #21cbb1;
        color: #fff !important;
    }
    
    .befor-holiday .other-active{
        background-color: #f7dbe4 !important;
        color: #fff !important;
    }
    .befor-holiday .other-active:hover{
        color: #fff !important; 
    }
    .befor-holiday>span{
        background-color: #e993b0 !important;
        color: #fff !important;
    }
    
    .befor-holiday .text-div{
        color: #f7dbe4 !important;
    }
    
    .days li.workday {
        color: #21cbb1;
    }
    .days li.workday > span {
        background: #21cbb1;
        color: #fff;
    }
    .days li .active {
        background: #00b8ec;
        color: #fff;
    }
    .days li .other-month {
        color: gainsboro;
    }
    .days li .other-active{
        color: #909090;
    }
    .days li.workday .other-active{
        color: #fff !important;
        background: #b7ede4 !important;
    }
    .days li.workday .other-active+.text-div{
        color: #b7ede4 !important;
    }
    
    .days li.holiday .other-active:hover {
        background-color: #e993b0 !important;
        color: #fff !important;
    }
    .days .befor-other-month{
        color: gainsboro !important;
        background: #ffffff !important;
    }
    .days .befor-other-month:hover {
        color: gainsboro !important;
        background: #ffffff !important;
    }
    .click-div {
        background: #e1e1e1;
        height: 100%;
    }
    .setday-div {
        background: #e1e1e1;
        height: 100%;
    }
    
    .text-div >>> .timeDown{
        border-top: 1px solid;
        display: inline;
        line-height: initial !important; 
    }
    .days span:hover{
        color: #ffffff !important;
        background-color: #25d2ba ;
    }
    .days .holiday .after-other-month:hover{
        color: #ffffff !important;
        background-color: #25d2ba !important;
    }
    </style>
    
    
    目前暂无回复
    关于 广告投放
    ©2016 - 2019 V4.1.6 Powered by 北京雏森科技有限公司