Use js to achieve calendar effect
In the company, at the very beginning, there was a need to develop a project with vue3 to make a schedule module. At that time, there was no good ecological surroundings, so I hand-rolled a js output calendar
class calendar {
constructor(date) {
this.currentDay = undefined
this.currentYear = undefined
this.currentMonth = undefined
this.currentWeek = 1
this.days = []
this.init(date)
}
formatDate(year, month, day) {
let y = year;
let m = month;
if (m < 10) m = "0" + m;
let d = day;
if (d < 10) d = "0" + d;
return y + "-" + m + "-" + d;
}
//初始化
init(cur) {
let date
if (cur) {
// 如果有就从传递的日期的月份开始算
date = new Date(cur)
} else {
//如果没有cur 就从当前月的1号开始
let now = new Date();
let d = new Date(
formatDate(now.getFullYear(), now.getMonth(), 1)
);
d.setDate(35);
date = new Date(
formatDate(d.getFullYear(), d.getMonth() + 1, 1)
);
}
this.currentDay = date.getDate();
this.currentYear = date.getFullYear();
this.currentMonth = date.getMonth() + 1;
this.currentWeek = date.getDay(); // 1...6,0 获取当前星期几
let str = this.formatDate(
this.currentYear,
this.currentMonth,
this.currentDay
);
this.days.length = 0;
// 算date所在周的日期的前几天 state.currentWeek-n来控制从周几开始 对应的后面算剩下日期的时候就要介绍n
for (let i = this.currentWeek; i >= 0; i--) {
let d = new Date(str);
d.setDate(d.getDate() - i);
// d.setDate(d.getDate() - i);
let dayobject = {
}; //用一个对象包装Date对象 以便为以后预定功能添加属性
dayobject.day = d;
dayobject.dayStr = d.toLocaleString();
dayobject.dayStrNL = this.formatDateNL(d)
dayobject.matters = [];
this.days.push(dayobject); //将日期放入data 中的days数组 供页面渲染使用
}
//算剩下的日期
for (let i = 1; i <= 42 - this.currentWeek - 1; i++) {
let d = new Date(str);
d.setDate(d.getDate() + i);
let dayobject = {
};
dayobject.day = d;
dayobject.dayStr = d.toLocaleString();
dayobject.dayStrNL = this.formatDateNL(d)
dayobject.matters = [];
this.days.push(dayobject);
}
console.log(this);
}
//获取农历
formatDateNL(date) {
let D = [
'',
"一",
"二",
"三",
"四",
"五",
"六",
"七",
"八",
"九",
"十",
"十一",
"十二",
"十三",
"十四",
"十五",
"十六",
"十七",
"十八",
"十九",
"廿十",
"廿一",
"廿二",
"廿三",
"廿四",
"廿五",
"廿六",
"廿七",
"廿八",
"廿九",
"三十"]
let M = [
'',
"一",
"二",
"三",
"四",
"五",
"六",
"七",
"八",
"九",
"十",
"十一",
"十二",
]
let NLDateStr = date.toLocaleDateString("ja-JP-u-ca-chinese")
console.log(NLDateStr);
let dateArr = NLDateStr.split("-");
let MStr = dateArr[1]
let DStr = dateArr[2]
// console.log(MStr.indexOf('閏'));
let r = undefined
if (MStr.indexOf('閏') != -1) {
r = MStr.slice(1)
}
if (DStr == 1) {
// if(MStr.indexof('')){}
return MStr.indexOf('閏') != -1 ? '闰' + M[r] + "月" : M[MStr] + "月";
} else if (DStr <= 10) {
return "初" + D[DStr];
} else {
return D[DStr];
}
}
}
The final printed data is like this. Generally, the calendar we see will display 42 days or 35 days. What I do here is 42 days.
end
There is also the method of the next month and the previous month without adding it later, mainly to get the 1st of the current month by chance, and then calculate the day of the week on the 1st, then traverse the first few days of the current week, and then calculate the following remaining days