最近在产品业务开展中,碰到了有使用日历展示数据的需求,当即想起来了js常用案例——万年历的实现,这里做的相对简单,只需获取本月的日历展示出来即可,另加上下月份切换。
首先,我们先来看一下最终要实现的效果,即UI设计图:
(这里只讨论万年历展示的实现,业务数据展示已马赛克,请见谅~~)
在设计图中我们可以看出,首尾的灰色部分为上月和下月的相关日期补充,蓝色部分为本月日期展示。 到这里我们就整理一下思路:
1、本月第一天是周几。
2、今年是平年/闰年的判断(关系到二月份天数)。
3、本月第一天前存在多少空位,需要补充多少上月日期。
4、本月最后一天存在多少空位,需要补充多少下月日期。
5、处理好逻辑关系后,将处理完的日历信息进行渲染展示。
思路整理之后,那么我们只需要将我们的逻辑转换为代码:
<!-- 基础布局html(只展示结构,css样式可自行修改,这里不做赘述) -->
<div class="calendarInfo">
<h6 class="calendarTitle">
<div class="setImg">
&l