<table border rules=none cellspacing=0 align=center frame=void>
<tr id="f"><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th><th>周六</th><th>周日</th></tr>
<tr v-for="(item,index) in 6" :key="index">
<td v-for="(type,k) in result[index].arr" :key="k" :class="type.showActive ? 'active' : ''">
<span v-if="!type.hide">{{type.num}}</span>
</td>
</tr>
</table>
result: [],
y: new Date().getFullYear(),
m: new Date().getMonth() + 1,
d: new Date().getDate(),
days: [],
prev() {
if(this.m > 1){
this.m -= 1;
} else {
this.m = 12;
this.y -= 1;
}
this.pushDays(this.y, this.m);
},
next() {
if(this.m<12){
this.m += 1;
} else {
this.m = 1;
this.y += 1;
}
this.pushDays(this.y, this.m);
},
getDays(Y,M) {
let day = new Date(Y, M, 0).getDate()
return day;
},
getWeek(Y,M){
let now = new Date(Y,M-1,1)
let week = now.getDay();
return week;
},
pushDays(Y,M) {
this.days = [];
this.result = [];
var yN = new Date().getFullYear();
var mN = new Date().getMonth() + 1;
//将这个月多少天加入数组days
for(let i = 1; i <= this.getDays(Y,M); i++) {
this.days.push({ num: i, hide: false, showActive: yN == Y && mN == M && i == this.d ? true : false })
}
//将下个月要显示的天数加入days
for(let i = 1; i <= 43 - this.getDays(Y,M) - this.getWeek(Y,M) ; i++) {
this.days.push({ num: i, hide: true, showActive:false })
}
//将上个月要显示的天数加入days
let lastMonthDays = this.getDays(Y, M)
for(let i = 1; i < this.getWeek(Y,M) ; i++) {
this.days.unshift({ num: lastMonthDays - i, hide: true, showActive:false })
}
for(let i = 0; i < this.days.length; i += 7) {
this.result.push({arr : this.days.slice(i, i + 7)})
}
},