当前位置： 移动技术网 > IT编程>网页制作>Html5 > # pc端个性化日历实现

# pc端个性化日历实现

2019年04月16日  | 移动技术网IT编程  | 我要评论

顺德花溪公园,黄鳝门21分钟完整版,昆明第一毒妇孟聂嘉

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>

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网