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>