jQuery日历记事插件SimpleCalendar（附源代码）

二期修改SimpleCalendar为日历记事插件，并修复多个bug，带农历、节假日。

一、效果图：

二、Simple-Calendar插件的使用方法

1、引入资源

(1). 使用日历插件前首先要引用资源：JS和CSS

说明：由于提示需要用到弹框插件，这里选择了项目已带的插件layui。

<!--引入css-->
<link rel="stylesheet" type="text/css" href="./stylesheets/simple-calendar.css?v=1.01">
<link rel="stylesheet" type="text/css" href="../js/layui-v2.2.3/css/layui.css"><!--引入js-->
<script type="text/javascript" src="./javascripts/jquery-2.1.4.js"></script>
<script type="text/javascript" src="../js/layui-v2.2.3/layui.js"></script>
<script type="text/javascript" src="./javascripts/simple-calendar.js"></script>
<script type="text/javascript" src="./javascripts/main.js"></script>

2、初始化一个日历

(1). 首先为calendar准备一个容器，可以限定容器大小。

<div id='container'></div>
<script>var myCalendar = new SimpleCalendar('#container');
</script>

这样一个日历就诞生了 ^-^

3、配置项说明

(1). 简单的配置项：

var options = {width: '500px',height: '500px',language: 'CH', //语言showLunarCalendar: true, //阴历showHoliday: false, //休假-需要改js，这里没用到先禁用showFestival: true, //节日showLunarFestival: true, //农历节日showSolarTerm: true, //节气showMark: true, //标记realTime: true, //实时时间timeRange: {startYear: 1900,endYear: 2049},timeZone: "", //时区mark: {},markColor: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],//记事的各个颜色main: function (year, month) {},theme: {changeAble: false,weeks: {backgroundColor: '#FBEC9C',fontColor: '#4A4A4A',fontSize: '20px'},days: {backgroundColor: '#ffffff',fontColor: '#565555',fontSize: '24px'},todaycolor: 'orange',activeSelectColor: 'orange',invalidDays: '#C1C0C0'}
}

(2). 关于数据：

当用户选择了年月后，源js会返回一个回调方法，也就是上面的main。

main: function (year, month) {// alert("[获取数据]" + year + "--->" + month);var index = -1;if (layer) index = layer.msg('正在查询数据......', {icon: 16, shade: 0.6});//@-这里获取数据：console.log(year + "--->" + month);//模拟获取数据startvar resultObj = {}, status = ['待揽收', '已发货', '配送中', '已签收'];for (var i = 1; i <= 28; i++) {var array = [];var date = year + "-" + month + "-" + (i < 10 ? '0' + i : i);for (var num = 0; num <= i % 4; num++)array.push({title: '第' + (num + 1) + '个货区某个快递在该天需要处理的事情呀呀呀',name: '某区',ratio: (num + 1) * (num + 1) + '%',status: num,statusText: status[num]});resultObj[date] = i == 27 ? [] : array;}console.log(resultObj);//模拟获取数据endif (layer) layer.close(index);return resultObj;
},

其中，回调了年和月，可做成通过年和月去接口查询数据，返回格式请运行后自查。

4、国际化

language： 语言的话目前只支持中文和英文，分别对应'CH','EN'

如果想要加更多的语言或者更改现在的显示，可以直接更改languageData内容

5、节日显示配置

showLunarCalendar: true, //是否显示阴历日期
showHoliday: true,       //是否显示休假休假
showFestival: true,      //是否显示国际节日
showLunarFestival: true, //是否显示农历节日
showSolarTerm: true,     //是否显示节气
showMark: true,          //是否显示标记日期

6、时间范围

这个时间范围设置的是下拉框中的年数范围

timeRange: {startYear: 2002,endYear: 2049
}

7、标记日期（记事）

标记日期配置只有在 showMark 为 true 时才会生效

mark: {'2019-11-01': []
}

这样就会在日历的对应日期上面添加标记，当鼠标停留时显示输入的信息

8、主题配置

theme: {changeAble: false,weeks: {backgroundColor: '#FBEC9C',fontColor: '#4A4A4A',fontSize: '20px',},days: {backgroundColor: '#ffffff',fontColor: '#565555',fontSize: '24px'},todaycolor: 'orange',activeSelectColor: 'orange',
}

主题配置只有在changeAble 为 true 时才会生效 weeks 设置的是星期一栏的主题，分别对应背景颜色，字体颜色，字体大小 days 设置的是日期的主题，参数同上 todaycolor 设置的是当天的日期背景颜色 activeSelectColor 设置的是鼠标滑过事件对应日期的边框颜色

9、事件接口说明

myCalendar.updateSize('500px', '500px');
myCalendar.addMark('2016-3-7', 'test');
myCalendar.setLanguage('EN')
myCalendar.showFestival(false);
myCalendar.showLunarCalendar(false);
myCalendar.showHoliday(false);
myCalendar.showSolarTerm(false);
myCalendar.showLunarFestival(false);
myCalendar.showMark(false);
updateSize(width,height)

10、其他

//关闭或者显示国际节日
showFestival(false);
//关闭或者显示阴历日期
showLunarCalendar(false);
//关闭或者显示假期
showHoliday(false);
//关闭或者显示二十四节气
showSolarTerm(false);
//关闭或者显示阴历节日
showLunarFestival(false);
//关闭或者显示标记
showMark(false)

三、附件1-修复原SimpleCalendar插件的几个bug

1、农历全部都显示初undefined？字符计算问题，s += this.nStr1[Math.floor(d % 10)];

2、修复最大最小年份的有效控制；

3、修复一个月42天6行的显示问题，并加了显示判断；

4、修复了一个格子显示不下时超长问题。

四、附件2-新增了功能

1、新增日历上的记事功能；

2、新增记事状态栏：

(1). 点击状态栏显示隐藏相对的记事项；

(2). 状态栏颜色可以配置（通过markColor数组）

3、新增对记事的弹框提示功能（layui的layer）；

五、附件3-不足之处

1、不支持标题的条件扩展，比如我要加快递负责人筛选。

2、宽高适应度还不够。

3、休假功能不完善，都在js的文末写死了（本功能没用到，就禁用啦啦啦：showHoliday=false）

六、附件4-分享几个效果：

随缘进步，按需所改，按意文记，惶恐忘记，亦助他人。

七、附件5-源代码

个人源代码：https://download.csdn.net/download/qq_26599807/11986249

（如下载使用，请注意引入自己的相关js和css哦 ^_^）

The end......