calendar-helper

0.2.0 • Public • Published

calendar-helper

Build Status

NPM

一个生成日历数据的工具;

重要版本变更

  • 0.2.0:精简优化,删除获取多个月份的功能(getCalendar),让该库的功能更单一;现在一次只能获取一个月的数据,需要多个月份数据的,在调用处加循环多次调用即可;
  • 0.1.2:添加 monday 参数,支持配置周一到周日、周日到周六的数据排列方式;修改文档中部分描述不当的文案;
  • 0.1.0:默认引用路径改为require方式,import路径改为'calendar-helper/index'
  • 0.0.x:在vue中引用,并未考虑require的情况

安装

$ npm install calendar-helper

数据结构

日历数据

本工具生成结果为一个月的日历数据,数据类型为一个二维数组,每行有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'), // 当前这一天的日期字符串
    }

引用

Node

var calendarHelper = require('calendar-helper'); // require引用
import CalendarHelper from 'calendar-helper/index'; // es6 import引用,可用于vue中

浏览器

<script src='./dist/index.js'></script>

以 amd 或 cmd 模式引入,如果环境不支持 amd 或 cmd,挂载到window上,window.calendarHelper;

点击此处查看测试页面

  // seajs测试
  seajs.use('calendarHelper', function (calendarHelper) {
    console.log(calendarHelper);
  });
  
  // requirejs 测试
  requirejs(['calendarHelper'], function (calendarHelper) {
    console.log(calendarHelper);
  });
  
  // 浏览器原生
  console.log(window.calendarHelper);

主方法

getMonthData(date, curDate, fixRows, monday)

本库的核心方法,生成一个月的日历数据; 返回值:当月的二维数组数据;

  • date: date|number|string 需要操作的时间,格式为Date类型或时间戳或时间戳字符串;
  • curDate: date|number|string 需要选中的日期,格式为Date类型或时间戳或时间戳字符串;不传或格式错误,则默认选中今天,表现在对象的today属性上;
  • fixRows: boolean 是否需要固定周数,每月有四周或五周或六周,如果设置为true:则统一返回六周,其他的用下个月来补;如果设为false,则只返回具有当前月份周数的数据;这个参数的使用场景大体是这个:在切换年月时,日历高度(周数)保持不变;
  • monday: boolean 第一天是否为周一,即是否按照周一到周日的顺序排列数据;默认为false,按周日到周六的顺序排列;如果设置为true,则按照周一到周日的顺序排列;
let res1 = CalendarHelper.getMonthData(new Date(2018, 10)); // 获取2018-11月份的数据
let res2 = CalendarHelper.getMonthData(new Date(2018, 10), new Date(), true, true); // 获取2018-11月份的数据

辅助方法

辅助方法是在生成数据过程中用到的,也封装起来对外提供:

1. parseDate(date|string|number)

将参数转换为日期;

参数为日期对象、时间戳或时间戳字符串;

返回值:Date类型,如果参数是date类型,复制一个日期返回;参数不合法时,返回当前时间;

    var date = CalendarHelper.parseDate(1541314815690); 
    var date1 = CalendarHelper.parseDate(new Date()); 
    var date2 = CalendarHelper.parseDate('1541314815690'); 

2. getDays(date)

获取某个月份有多少天;

date: date|number|string 需要操作的时间,格式为Date类型或时间戳或时间戳字符串;

返回值:Number类型,当前年月的天数;

3. getWeeks(date, monday)

获取某个月前后占用的周数

  • date: date|number|string 需要操作的时间,格式为Date类型或时间戳或时间戳字符串
  • monday: boolean 第一天是否为周一,即是否按照周一到周日的顺序排列数据;默认为false,按周日到周六的顺序排列;如果设置为true,则按照周一到周日的顺序排列;

返回值:Number类型,当前年月所占用的周数

4. getWeekByDate(date, monday)

获取一个日期在这个月属于第几周

  • date: date|number|string 需要操作的时间,格式为Date类型或时间戳或时间戳字符串
  • monday: boolean 第一天是否为周一,即是否按照周一到周日的顺序排列数据;默认为false,按周日到周六的顺序排列;如果设置为true,则按照周一到周日的顺序排列;

返回值:Number类型,当前年月的周数,取值范围 4-6;

5. getMonthFirstWeek(date)

获取一个月份第一天是周几

date: date|number|string 需要操作的时间,格式为Date类型或时间戳或时间戳字符串

返回值:Number类型,取值范围 0-6;

测试

$ npm test

HTML页面测试地址:点击查看测试结果

Package Sidebar

Install

npm i calendar-helper

Weekly Downloads

10

Version

0.2.0

License

MIT

Unpacked Size

24.6 kB

Total Files

5

Last publish

Collaborators

  • sun2dan