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>