原生javascript + vue组成的日历

本项目是一款日历,提供了展开看整月、收拢看整周功能;上月下月翻页功能;点击具体日期响应事件以及点击灰色日期,字段跳转到上月、下月功能。

主要思路是从两侧计算完日期后,加上本月中间这一块日期,拼接而成。

例如:

   整月数据:

          1.首先获取本月总共多少天,第一天和最后一天是星期几。最终获得本月数据

                     2.拿到刚才计算的本月第一天星期几,用['日','一','二','三','四','五','六']这个序列定位上月还缺几天需要填入,计算出上月总共多少天,循环得出上月需要填满的数据

                    3.拿到刚才计算的本月最后一天星期几,步骤如图二,得出下月需要填满的数据。

                    4.最后把上月数据、本月数据、下月数据合并起来,最终得到整月数据

            本周数据:

                    逻辑和整月数据一样的,优先定位本周的日期和星期,计算得出前面需要填满和后面需要填满的数据

最后,具体逻辑代码在:https://download.csdn.net/download/miss_ll/11189980,里面有我很多注释,全部由我原创,感谢支持,有更简便的方式可以和我交流,我会优化下~

原生javascript + vue组成的日历_第1张图片

原生javascript + vue组成的日历_第2张图片

现在在上面的基础上更新了一个带有农历的显示的版本:主要转农历的代码是网上找的大神的现成代码哈

原生javascript + vue组成的日历_第3张图片

你可能感兴趣的:(JavaScript,Vue.js)