生成日历数组,有3个要素。
1.本月共有多少天;
2.上个月一共有多少天(即上个月最后一天是几号);
3.本月第一天是星期几
使用Date(),参数分别是this.year(之前定义的年),this.month(之前定义的月)
在向数组中插入数据时,因为需要判定本月和上月或下月,便于设置类等,所以插入数组中的时对象,包含日期和类名判断等。
方法如下:
- 定义一个空数组
var arr = [];
- 本月共有多少天。(Date()函数中,第二个参数是月,但是从0开始计数。第三个参数是天,为0时会自动向前减一月)
var thisMonthLength = new Date(this.year, this.month, 0).getDate();
- 上个月共有多少天
var prevMonthLength = new Date(this.year, this.month - 1, 0).getDate();
- 本月第一天是星期几
var firstDay = new Date(this.year, this.month - 1).getDay();
- 本月第一天是星期几,就让上月总天数减几次,添加至数组头部中
while(firstDay--){
arr.unshift({
day: prevMonthLength--,
current: false
})
}
- 本月共有多少天就要向数组中插入多少数据。日期从1开始,定义一个变量,让变量加加
var count = 1;
while(thisMonthLength--){
arr.push({
day: count++,
current: true
})
}
- 有的月份有5周(35天)的数据,有的月份有6周(42天)的数据,需要判定本月天数+上月剩余天数是否超过35天,如果超过证明数组需要42条数据。下个月的日期依然从1开始
count = 1;
while(arr.length != 35 && arr.length !=42){
arr.push({
day: count++,
current: false
})
}
生成日历数组的基本逻辑就是如此
完整代码如下:
//定义一个calendar函数,返回值是日历数组
calendar(){
//定义数组
var arr = [];
//本月天数
var thisMonthLength = new Date(this.year, this.month, 0).getDate();
//上月天数
var prevMonthLength = new Date(this.year, this.month - 1, 0).getDate();
//本月第一天星期几
var firstDay = new Date(this.year, this.month - 1).getDay();
//插入上月剩余天数
while (firstDay--) {
arr.unshift({
day: prevMonthLength--,
current: false
})
};
//定义本月日期计数,并插入本月天数
var count = 1;
while(thisMonthLength--){
arr.push({
day: count++,
current: true
})
};
//判断本月日历数组共有多少天,并补齐下月出现的天数
count = 1;
while(arr.length != 35 && arr.length != 42){
arr.push({
day: count++,
current: false
})
};
//返回数组
return arr;
}
在数组中每个数据需要其他属性的时候,只需要在插入的数据对象中加入其他属性。