# pc端个性化日历实现

pc端个性化日历实现

技术：vue => v-for、slot-scop 插槽域
需求：需要实现日历上每一天动态显示不同的信息
思路:运用vue 中 slot-scop 插槽域的知识点,将个性化的代码样式放到slot中 再通过slot-scop 获取这个插槽中的所需数据

一、实现日历组件

思路:布局上就是一个7列，行数不确定的表格。只不过，日历的表格是宽和高相等，随着浏览器的大小变化，表格大大小也要变化，所以要用padding布局，难点在日期数组的生成上面。
1.布局的实现
<div class="calendar">
    <div class="calendar-operation">
        <span class="calendar-title">{{title}}</span>
        <div class="calendar-YearMonth">
           <Icon type="ios-arrow-back" style="margin-right:30px;" @click="prev" />
           <div class="calendar-YearMonth-content">{{YearMonth}}</div>
           <Icon type="ios-arrow-forward" style="margin-left:30px;color:" @click="next" />
        </div>****
    </div>
    <div class="calendar-head">
        <div class="calendar-head-item">星期日</div>
        <div class="calendar-head-item">星期一</div>
        <div class="calendar-head-item">星期二</div>
        <div class="calendar-head-item">星期三</div>
        <div class="calendar-head-item">星期四</div>
        <div class="calendar-head-item">星期五</div>
        <div class="calendar-head-item">星期六</div>
    </div>
    <div class="calendar-content">
        <div v-for="(item,index) in dateArray" :key="index" class="calendar-row">
            <div v-for="(val,key) in item" :key="key" :class="{'calendar-cols':true,'calendar-enable':!val.enable}">
                <span class="calendar-cols-content">{{val.value}}</span>
                <div class="calendar-cols-opera" >
                    <div style="height:100%;">
                        <slot :oper = 'val.oper'></slot>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style scoped lang="less">
.calendar{
    width:100%;
    border:1px solid #e8eaec;
    border-left: 0;
    border-radius: 8px;
    background: #fff;
    .calendar-operation {
        height: 60px;
        border-bottom: 1px solid #e8eaec;
        border-left:1px solid #e8eaec;
        .calendar-title{
            display:block;
            font-size:12px;
            color:#fb9153;
            float: left;
            height: 100%;
            line-height:60px;
            padding-left: 40px;
        }
        .calendar-YearMonth{
            display: flex;
            height: 100%;
            justify-content: center;
            align-items: center;
            font-size:17px;
            color: #fb9153;
        }
    }
    .calendar-head {
        display: flex;
        height:40px;
        border-bottom: 1px solid #e8eaec;
        border-left:1px solid #e8eaec;
        .calendar-head-item {
            flex: 1;
            height:100%;
            line-height:40px;
            font-size: 12px;
            text-align: center;
            border-left: 1px solid #e8eaec;
        }
    }
    .calendar-content {
        width: 100%;
        .calendar-row{
            width:100%;
            display: flex;
            .calendar-cols {
                position: relative;
                flex: 1;
                height: 0;
                padding-bottom: 14%;
                border-bottom: 1px solid #e8eaec;
                border-left: 1px solid #e8eaec;
                .calendar-cols-content{
                    display:block;
                    text-align: right;
                    height:0;
                    padding-bottom: 15%;
                    box-sizing: border-box;
                    padding: 0 10px;
                    margin-bottom: 15%;
                }
                .calendar-cols-opera{
                    width:100%;
                    height: 0;
                    padding-bottom: 84%;
                    box-sizing: border-box;
                    overflow-y: auto;
                }
            }
        }
        .calendar-enable{
            color: #e8eaec;
        }
    }
}
</style>
2.日历数组的实现
 思路：获取当前月有多少天，当月第一天对应的星期。
 实现：如何获取这个月的天数，通过下一个月的第一天 减去一天时间就是这个月的最后一天，进而能知道这个月的天数
 //获取当月最后一天
 function getLastDate(year,month) {
    let currentMonth = month - 1
    let nextMonth = currentMonth + 1
    if(nextMonth > 11 ) {
        nextMonth = 0
        year++
    }
    //let nextMonthFisrtDate = new Date(year,nextMonth,1).getDate()
    let lastDate = new Date(new Date(year,nextMonth,1).getTime() - 1000*60*60*24).getDate()
    return lastDate
}
//获取当月第一天对应的星期
function getFirstDay(year,month) {
    let currentMonth = month - 1
    return new Date(year,currentMonth,1).getDay()
}
//获取最后一天的星期
function getLastDay(year,month) {
    let currentMonth = month - 1
    return new Date(year,currentMonth,getLastDate(year,month)).getDay()
}
//获取当月 日期数据
function getDateArray(yearMonth) {
    let year = parseInt(yearMonth.split('-')[0])
    let month = parseInt(yearMonth.split('-')[1])
    let dateArray = []
    let firstDay =  getFirstDay(year,month,1)
    let lastDate = getLastDate(year,month)
    let lastDateDay = getLastDay(year,month)
    let prevLastDate = getLastDate(year,month - 1)
    //缓存每一行数据
    let newArr = []
    //获取第一行数据
    for(let i=1;i<=7;i++){
        if(i<=firstDay){
            newArr.push({
                date:'',
                value: prevLastDate - (firstDay-i),
                enable: false,
                oper:{}
            })

        }
        else{
            newArr.push({
                date:new Date(year,month-1,i-firstDay).getTime(),
                value:i-firstDay,
                enable: true,
                oper:{}
            })
        }
    }
    dateArray.push(newArr)
    newArr = [] //清空
    let count = 0
    for (let i=(7-firstDay+1);i<=lastDate;i++){
        if ( count < 7){
            newArr.push({
                date:new Date(year,month-1,i).getTime(),
                value:i,
                enable:true,
                oper:[]
            })
        }
        else{
            dateArray.push(newArr)
            newArr = []
            newArr.push({
                date:new Date(year,month-1,i).getTime(),
                value:i,
                enable:true,
                oper:[]
            })
            count = 0
        }
        if (i == lastDate && count == 6) {
            dateArray.push(newArr)
        }
        count++
    }
    //获取最后一行
    newArr = []
    if(lastDateDay<6){
        for(let i=0;i<=6;i++){
            if(i<=lastDateDay){
                newArr.push({
                    date:new Date(year,month-1,lastDate-(lastDateDay-i)).getTime(),
                    value:lastDate-(lastDateDay-i),
                    enable:true,
                    oper:[]
                })
            }
            else{
                newArr.push({
                    date:'',
                    value:i-lastDateDay,
                    enable:false,
                    oper:[]
                })
            }
        }
        dateArray.push(newArr)
    }
    return dateArray;
}

二、个性化日历使用

<Calendar :operData="operData" @change="calendarChange" :title="title">
        <template slot-scope="slotScope">
            <div v-for="(item,index) in slotScope.oper " :key="index" class="calendar-oper">
               <div class="calendar-oper-tag" :style="{background:tagType[item.type].color}">
                   <span>{{item.visitTypeCode}}</span>
               </div>
               <div class="calendar-oper-time">{{item.time}}</div>
               <div class="calendar-oper-content">{{item.content}}</div>
            </div>
        </template>
    </Calendar>