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);

	//模拟获取数据start
	var 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);
	//模拟获取数据end

	if (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......