平时工作中总是能遇到日历效果,日历的数据逻辑真是非常麻烦,所以就写了一个工具,做成了NPM包,方便调用;
日历数据结构
本工具生成结果为一个月的日历数据,数据类型为一个二维数组,每行有7列,对应一周7天,共4-6行,对应月份里的几个周;首尾行中,可能会包含前后月份的数据;例如2022年3月份数据如下:
[
[{day:27,...}, {day:28,...}, {day:1,...}, {day:2,...}, {day:3,...}, {day:4,...}, {day:5,...}] ,
. . ,
[{day:27,...}, {day:28,...}, {day:29,...}, {day:30,...}, {day:31,...}, {day:1,...}, {day:2,...}]
]
日期对象结构
每个日期对象中,除了包含上面的day字段外,还有其他一些实用的字段,完整字段如下:
{
curMonth: Number (-1,0,1), // 是否为当前月份的数据,首尾行可能会有前后月份的数据(第一个参数d对应的月份),0:当前月,-1:上一个月,1:下一个月
today: Boolean, // 是否为当前日期(是否为传入参数curDate对应的日期)
date: Date, // 当前这一天的日期对象
ts: Number, // 当前这一天的时间戳
year: Number, // 当前这一天的年
month: Number, // 当前这一天的月,值范围:1-12
day: Number, // 当前这一天的日,值范围:1-31
week: Number, // 当前这一天是周几,值范围:0-6
weekIdx: Number, // 当前这一天属于该月的第几周,值范围:1-6
days: Number, // 当前这一个月的天数,取值范围:28-31
dateStr: String ('2018-10-31'), // 当前这一天的日期字符串
}
主方法
最新的0.2.0版本中,主方法只有1个,之前的0.1.3版本中是两个
getMonthData(date, curDate, fixRows, monday)
作用:生成一个月的日历数据;
返回值:获取一个月的数据,返回当月的二维数组数据;
参数:
- date: date|number|string 需要操作的时间,格式为Date类型或时间戳或时间戳字符串;
- curDate: date|number|string 需要选中的日期,格式为Date类型或时间戳或时间戳字符串;默认选中今天,表现在对象的today属性上
- fixRows: boolean 是否需要固定周数,具体见getCalendar中的opts.fixRows;
- monday: boolean 第一天是否为周一,即是否按照周一到周日的顺序排列数据;默认为false,按周日到周六的顺序排列;如果设置为true,则按照周一到周日的顺序排列;
辅助方法
在生成数据过程中用到的方法,也封装起来对外提供,包括获取当月第一天是周几、一个月前后占用了几周、某天属于当月的第几周等等,有兴趣的朋友可以去NPM 或 GitHub 查看详细文档。
NPM地址:http://www.npmjs.com/package/calendar-helper
GitHub地址:http://github.com/sun2dan/calendar-helper