1,获取当前日期数据
getData() {
let Data = new Date()
let day = Data.getDate()
let mounth = Data.getMonth()+1
this.mounth = mounth
let year = Data.getFullYear()
this.year = year
this.setCalendar(year, mounth)
},
2,获取当前月份日期排列
setCalendar(year, mounth) {
//获取月份的总天使
let d = new Date(year,mounth,0);
let days=d.getDate();
//获取当前月份第一天的周几
let w = new Date(year,mounth-1,1);
let week = w.getDay();
let weeks=[]
let allDays = days+week-1
let constDayOfWeeks = [];
for(let j=week;j<=allDays;j++){
constDayOfWeeks.push({week:j%7,day:j-week+1})
}
let week1=[]
let week2=[]
constDayOfWeeks.forEach((n, index)=>{
if (n.week == 0 && index !==0) {
week2.push(week1)
week1 = []
week1.push(n)
} else if (index == constDayOfWeeks.length-1) {
week1.push(n)
week2.push(week1)
} else {
week1.push(n)
}
})
let week3 = []
week2.forEach((n)=>{
if(n.length !=7) {
if (n[0].week == 0) {
let len = 7 - n.length
let arr = Array(len)
n = [...n, ...arr]
} else {
let len = 7 - n.length
let arr = Array(len)
n = [...arr, ...n]
}
}
week3.push(n)
})
this.weeksAll = week3
},
3,html样式
<table class="table-1 weeks" border="1" cellspacing="0" cellpadding="0">
<tr>
<th>星期日</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
</tr>
<tr v-for="(item, index) in weeksAll" :key="index">
<td v-for="(items, index1) in item" :key="index1">
<div class="datas" v-if="items != undefined" :class="{'datas1': studyList[`${year}-${mounth>9?mounth+'': '0'+mounth}-${items.day>9?items.day+'':'0'+items.day}`] && !studyList[`${year}-${mounth>9?mounth+'': '0'+mounth}-${items.day>9?items.day+'':'0'+items.day}`]['have'] || !studyList[`${year}-${mounth>9?mounth+'': '0'+mounth}-${items.day>9?items.day+'':'0'+items.day}`]}">
{
{items == undefined? '': items.day}}
</div>
</td>
</tr>
</table>
css
.weeks {
& .datas {
width: 100%;
height: 30px;
text-align: center;
line-height: 30px;
background: #ed7d31;
}
& .datas1 {
width: 100%;
font-size: 60px;
font-weight: bold;
text-align: center;
height: 155px;
line-height: 155px;
background: none;
}
}
4,切换月份
//上一月
upMounth () {
if (this.mounth == 1) {
this.mounth = 12
this.year = this.year - 1
} else {
this.mounth = this.mounth - 1
}
this.setCalendar(this.year, this.mounth)
},
//下一月
downMounth() {
if (this.mounth == 12) {
this.mounth = 1
this.year = this.year + 1
} else {
this.mounth = this.mounth + 1
}
this.setCalendar(this.year, this.mounth)
},