「这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战」
第一当然是先来看看效果图啦，一个根据学期展现学期的上课周和考试周期的日历。
分析步骤
思路分析：
1、首先获取该学期的日期（2021年08月30日 - 2022年02月21日）为该学期的教学周
2、获取该教学周中，节假日的日期
3、教学周的那几周为考试周
4、开始布局日历的格式
5、日历数据的处理
数据处理分析：
1、设置考试周`week`
2、设置节假日`note`
3、`getDiffDate` 获取时间段的所有日期数组（处理当前数组中的日期，和note比对，存在的节假日，定义node字段）
4、`getoneWeek` 获取月份的第一天，定义特殊的样式，区分月份
5、`getk` 比对考试周`week` 当前周存在`week` 中，为考试周，设置考试周的样式
6、`getzhou`和`getzhouOne` 比对考试周的日期，设置日期的高两条样式。
实现代码
<div class="week-header" v-if="!beizhu">
<h6>教学<br />周次</h6>
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
<li>日</li>
</ul>
</div>
<div class="weekmain" v-if="!beizhu">
<div class="week">
<ul>
<li v-for="(item,index) in parseInt(date.length / 7)"
:key="index">
<p v-if="!getk(item)">{{item}}</p>
<p v-if="getk(item)"
style="color:#11b497">{{item}}</p>
<p v-if="getk(item)"
style="color:#11b497;font-size:0.18rem;">考试周</p>
</li>
</ul>
</div>
<div class="day">
<ul>
<li v-for="(item,index) in date"
:key="index"
:class="[getzhou(parseInt(index / 7) + 1) ? 'active' : '',getzhouOne((index / 7) + 1) ? 'active2' : '']">
<h6 v-if="new Date(item.day).getDate() == 1">{{getoneWeek(item.day)}}</h6>
<p v-if="item.day && new Date(item.day).getDate() != 1">{{new Date(item.day).getDate()}}</p>
<span>{{item.node}}</span>
</li>
</ul>
</div>
</div>
<script>
export default {
data () {
return {
xueqi:{
text:'2021年秋季',
id:1
},
showPicker:false,
columns: [{
text:'2021年秋季',
id:1
}],
beizhu:false,
week: ['17', '18', '19', '20'],
date: [],
kongday: 0,
note: [{
8: { 30: "老生开学"},
1: { 1: "元旦节"},
9: { 10: "教师节", 13: '新生开学', 21: '中秋节' },
10: { 1: "国庆节" },
2: { 1: "春节" }
}]
}
},
mounted () {
var date = this.getDiffDate('2021/08/30', '2022/02/21')
for (let i = 0; i < date.length; i++) {
var list = {}
var m = new Date(date[i]).getMonth() + 1;
var day = new Date(date[i]).getDate();
list.day = new Date(date[i])
if (this.note[0][m]) {
if (this.note[0][m][day]) {
list.node = this.note[0][m][day]
}
}
this.date.push(list)
}
var kongday = new Date(date[0]).getDay() == 0 ? 7 : new Date(date[0]).getDay()
if (kongday > 0 && kongday <= 7) {
for (var i = 0; i < kongday - 1; i++) {
this.date.unshift({})
}
}
},
methods: {
getzhou(z){
var d = this.week.find((e=>{
return e == z
}))
return d
},
getzhouOne(z){
var d = this.week.find((e=>{
return e == z
}))
return d
},
// 选择学期
onConfirm(value) {
console.log(value)
this.xueqi = value;
this.showPicker = false;
},
getk (i) {
var kao = this.week.find((e) => {
return Number(e) == i
})
return kao
},
getoneWeek (day) {
var tempDate = new Date();
var days = new Date(day).getMonth() + 1;
var week;
switch (days) {
case 1:
week = '一月';
break;
case 2:
week = '二月';
break;
case 3:
week = '三月';
break;
case 4:
week = '四月';
break;
case 5:
week = '五月';
break;
case 6:
week = '六月';
break;
case 7:
week = '七月';
break;
case 8:
week = '八月';
break;
case 9:
week = '九月';
break;
case 10:
week = '十月';
break;
case 11:
week = '十一月';
break;
case 12:
week = '十二月';
break;
}
return week
},
getDiffDate (start, end) {
var startTime = this.getDate(start);
var endTime = this.getDate(end);
var dateArr = [];
while ((endTime.getTime() - startTime.getTime()) > 0) {
var year = startTime.getFullYear();
var month = startTime.getMonth().toString().length === 1 ? (parseInt(startTime.getMonth().toString(), 10) + 1) : (startTime.getMonth() + 1);
var day = startTime.getDate().toString().length === 1 ? "0" + startTime.getDate() : startTime.getDate();
dateArr.push(year + "/" + month + "/" + day);
startTime.setDate(startTime.getDate() + 1);
}
return dateArr;
},
getDate (datestr) {
var temp = datestr.split("/");
if (temp[1] === '01') {
temp[0] = parseInt(temp[0], 10) - 1;
temp[1] = '12';
} else {
temp[1] = parseInt(temp[1], 10) - 1;
}
//new Date()的月份入参实际都是当前值-1
var date = new Date(temp[0], temp[1], temp[2]);
return date;
}
}
}
</script>
总结
在创建 Date 对象时尽量使用new Date('2021/01/01')这样的写法，否则在IOS设备上可能会出现Null 的情况。
