# pc端个性化日历实现

pc端个性化日历实现

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

一、实现日历组件

思路:布局上就是一个7列，行数不确定的表格。只不过，日历的表格是宽和高相等，随着浏览器的大小变化，表格大大小也要变化，所以要用padding布局，难点在日期数组的生成上面。
1.布局的实现

{{title}}

<Icon type="ios-arrow-back" style="margin-right:30px;" @click="prev" />

{{YearMonth}}

<Icon type="ios-arrow-forward" style="margin-left:30px;color:" @click="next" />

****

星期日

星期一

星期二

星期三

星期四

星期五

星期六

{{val.value}}

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() - 10006060*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">