创建当前月份日子的逻辑就是首先就是创建一个长度为42的数组，因为6*7=42，数组下标为0至42，然后获取当月的天数以及当月一号时候是星期几，通过计算获取本月天数的下标范围，然后通过循环进行赋值，这样就创建了日历本月的天数
然后是创建上个月的天数
按照惯例，贴上代码
_generatePrevMonth() { let date = this.options.days; let year = date.year; let month = date.month; let beginWeek = this._getWeekWeek(year,month-1,1);//本月开始星期 let countMonth = this._getMonth(year,month-1);//上月月份天数 let li = document.querySelectorAll('.dayLabel>.day'); beginWeek == 0 ? beginWeek+= 7 : ''; //如果月份开头为星期日，会出bug，这是防止 date.countDay += beginWeek; this.createArray(beginWeek,this.options.startOfWeek).map((day,i)=>{ if(i<beginWeek) { //上月总天数-本月开始星期几+1+i li[i].textContent = countMonth - beginWeek + 1 + i; } }); return this; }
创建上月的日子，首先获取本月一号是星期几，比如是星期三就可以知道前面空的数字分别为星期日、星期一和星期二,上月的天数能占三个位置，所以就创建一个长度为3的数组，然后计算上月的天数，然后通过逻辑判断进行赋值，就是如此~~~
最后就是下一个月的天数
代码 代码 代码
//创建下个月日子 _generateNextMonth() { let date = this.options.days; let year = date.year; let month = date.month; let beginWeek = this._getWeekWeek(year,month,1);//开始星期 let countMonth = this._getMonth(year,month+1);//下月月份天数 let li = document.querySelectorAll('.dayLabel>.day'); //data.countDay统计了上月和本月的日子数总量，直接减去即可 this.createArray(42-date.countDay , this.options.startOfWeek).map((day,i)=>{ li[date.countDay+i].textContent = i+1; }); }
这个逻辑比较简单，就是用（6*7=42）42减去上月天数和本月天数，剩下的位置为显示下个月的天数，所以就是这样子！！！
把封装好的代码也弄出来吧~~
//dom.create()调用 let dom = { create(html) { let template = document.createElement('template'); template.innerHTML = html; return template.content.firstChild; } }
//this.createArray()调用 //创建数组节点 createArray(length, fill) { let array = Array.apply(null, { length: length }).map(() => fill); return array; }
动作切换部分
切换日子这里相对来说就是比较简单，我直接贴代码，你们一看就懂了
//上一个月 previousMonth() { // this.options.days.month -= 1; this.changeMonth('prev'); } //下一个月 nextMonth() { // this.options.days.month += 1; this.changeMonth('next'); } //回到今天 resetMonth() { // this._generateTime(); this.changeMonth('defalut'); } //封装月份dom changeMonth(status) { let date = this.options.days; switch(status) { case 'prev': { --date.month < 1 ? date.year-- ? date.month = 12 : '' : ''; break; } case 'next': { ++date.month > 12 ? date.year++ ? date.month = 1 : '' : ''; break; } case 'defalut': { this._generateTime(); break; } } //移除节点 this._generateCalendar(); //重新添加节点 this._generateCurrentDay(); }
唔唔唔，整个日历组件下来大概就是这样子，整个流程写下来感觉自己的思维还是有所进步的，但是其实我觉得这个轮子代码还是可以再封装封装和完善的，嘻嘻~~
轮子功能比较简单，所以剩下的功能就等待小伙伴们自由发挥了~~
好了，第一次写文章，熬夜写的，突然就有灵感了，不肯睡觉，呵呵，，明天上班肯定是要打瞌睡了，呵呵~~~
本人是小白，从业将近一年，所以代码上有什么错误，请各位大神能够指出指出，嗯嗯，完~~