html pc端万年历插件,# pc端个性化日历实现

pc端个性化日历实现

技术：vue => v-for、slot-scop 插槽域

需求：需要实现日历上每一天动态显示不同的信息

思路:运用vue 中 slot-scop 插槽域的知识点,将个性化的代码样式放到slot中 再通过slot-scop 获取这个插槽中的所需数据

一、实现日历组件

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

1.布局的实现

{{title}}

{{yearmonth}}

****

星期日

星期一

星期二

星期三

星期四

星期五

星期六

{{val.value}}

.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;

}

}

}

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;

}

二、个性化日历使用

{{item.visittypecode}}

{{item.time}}

{{item.content}}