vue实现简单的日历效果

2020-06-13 10:46:35易采站长站整理

for(var i = 0; i< _this.tr_str; i++) {
str+='<tr>';
for(var k = 0; k < 7; k++) {

idx = i*7+k;
isRed = (k===0||k===6)?"isRed":"";
date_str=idx-_this.firstnow+1;
(date_str<=0 || date_str>this.m_days[this.mnow]) ? date_str=" " : date_str=idx-_this.firstnow+1;
date_str==_this.dnow?hasMsg='<td class="thisDay" date="'+date_str +'"><span class="'+isRed +'">'+date_str+'</span></td>':hasMsg='<td date="'+date_str +'"><span class="'+isRed +'">'+date_str+'</span></td>';

for(var l = 0, len = jsonHtml.length; l < len; l++) {
if(date_str== jsonHtml[l].date) {
var newStr = '<p>'+jsonHtml[l].msg +'</p>';
date_str==_this.dnow?hasMsg='<td class="thisDay" date="'+date_str +'"><span class="'+isRed +'">'+date_str+'</span>'+ newStr+'</td>':hasMsg='<td date="'+date_str +'"><span class="'+isRed +'">'+date_str+'</span>'+ newStr+'</td>';

}
}
str+=hasMsg;
}
str+='</tr>';
}
var table = document.getElementById('table');
table.innerHTML = str;
},
//两个参数代表的含义分别是this对象以及判断当前的操作是不是在进行月份的修改
sureDate(_this,other) {
this.newDate = new Date();
this.ynow = this.newDate.getFullYear();
if(!other) {
this.mnow=this.newDate.getMonth(); //月份
}
this.dnow=this.newDate.getDate(); //今日日期
this.firstDay = new Date(this.ynow,this.mnow,1);
this.firstnow=this.firstDay.getDay();
this.m_days = [31,28+this.is_leap(this.ynow),31,30,31,30,31,31,30,31,30,31];
this.tr_str = Math.ceil((_this.m_days[this.mnow] + this.firstnow)/7);
this.showMsg();
},
preMon() {
var _this = this;
this.mnow--;
this.sureDate(_this,"up");
},
nextMon() {
var _this = this;
this.mnow++;
this.sureDate(_this,"next");
},
//通过接口返回的是我们当前的月份对应在日历中需要处理的事项
showMsg() {
var jsonHtml = [{
date: 2,
msg: '吃饭'
},
{
date: 3,
msg: '睡觉'
},
{
date: 4,
msg: '打豆豆'
},
{
date: 6,
msg: '豆豆不在家'
},
{
date: 12,
msg: '~~~~~'
},
{
date: 15,
msg: '怎么办~~~~'
},
{
date: 20,
msg: '找豆豆'
}];
this.drawTable(jsonHtml)
}

},
mounted() {
//画出当前的月份的天数对应的表格
this.getDaysInfo();
//进行数据的获取,显示到对应的位置
}