Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示

2020-06-13 10:26:52易采站长站整理

return year + '-' + month + '-' + day;
},
getWeek(year,month,day){
var dt = new Date(year,month,day)
var weekArr = [] var dt_first = new Date(year,month,day-((dt.getDay()+6) % 7))
var week = []// console.log(year,month,day)
for(var j=0;j<7;j++){
var newdt = new Date(dt_first.getFullYear(),dt_first.getMonth(),dt_first.getDate()+j)
var _year = newdt.getFullYear()
var _month = newdt.getMonth()
var _day = newdt.getDate()
week.push({
mode:'week',
day:_day,
year:_year,
month:_month,
date:this.format(_year,_month,_day),
nongli:format.solar2lunar(_year,_month+1,_day),
istoday:(this.today.getFullYear()==_year && this.today.getMonth()==_month && this.today.getDate() == _day)?true:false,
ischecked:false,
othermonth:_month!=month
})
}
weekArr.push(week)
return weekArr
},
getMonth(year,month){ //创建单月历
var monthArr = [] var dt_first = new Date(year,month,1) //每个月第一天
var dt_last = new Date(year,month+1,0) //每个月最后一天
var monthLength = dt_last.getDate()-dt_first.getDate()+1
var daylist =[];
var space = (dt_first.getDay() - 1 + 7) % 7 //月历前面空格
//console.log(year,month)
for(var i = -space;i<36;i+=7){
var week = [] for(var j=0;j<7;j++){
var day = i+j+1
if(day>0 && day<=monthLength){
week.push({
mode:'month',
day:day,
year:year,
month:month,
date:this.format(year,month,day),
// 日历要显示的其他内容
thing:(day == 22 || day == 4) ? [{title:'生日',color:'red'},{title:'买蛋糕',color:'yellow'}]:[],
nongli:format.solar2lunar(year,month+1,day),
istoday:(this.today.getFullYear()==year && this.today.getMonth()==month && this.today.getDate() == day)?true:false,
ischecked:false
})
}else{
//其它月份
//week.push({})
var newdt = new Date(year,month,day)
var _year = newdt.getFullYear()
var _month = newdt.getMonth()
var _day = newdt.getDate()
week.push({
mode:'month',
day:_day,
year:_year,
month:_month,
date:this.format(year,month,day),
nongli:format.solar2lunar(_year,_month+1,_day),
istoday:(this.today.getFullYear()==_year && this.today.getMonth()==_month && this.today.getDate() == _day)?true:false,
ischecked:false,
othermonth:day<=0?-1:1,
})
}
}
monthArr.push(week)
}
return monthArr
},
get3month(){
var year = this.disp_date.getFullYear()
var month = this.disp_date.getMonth()
this.monthList = [] this.monthList.push(this.getMonth(year,month-1))
this.monthList.push(this.getMonth(year,month))