sys-calendar.js

jquery日历插件,自定义点击事件,记录信息,编辑假日安排等方法,使用简单,更新1.0版本,不定期更新版本,如需获取最新版本,请关注本网站WWW.husysui.com

说明
该插件还使用了sysui.js框架插件进行配置,该js具体说明在以后会发布,请关注我的网站
基础引用
						
					
					           
				 
引入3个文件,一个css样式文件,两个js文件一个jquery库,另外一个就是日历插件的js
基础html
					   
//根据id来显示 <script type="text/javascript"> $("#calendar").calendar({ //参数设置 }) </script>
先为calendar准备一个容器,可以设置大小,也可以在options中设置,不设置的话自动设为默认
参数配置说明
					   < script type="text/javascript">
					   	$("#calendar").calendar({
					   		data: data, //获取记录数据
							holiday: holidaydata, //规划假日时间
							work:workdata,//规划上班时间
							mode: "month",//显示模式,month为月份详细显示, year为年显示
							width:600,//日历宽度,如果不填则默认全屏模式
							showModeBtn: false,//是否显示月/年却换模式
                            showEvent: true,//设置年份显示记录信息,为true显示每月记录信息,为false不显示记录信息
							newDate: "2018-04-1", //设置初始开始时间,默认不填为当前时间
							cellClick: function(data, Event, me) {
								//点击每天的处理方法,用户自己编辑方法
								//data 数据
								// Event 当前事件
								//me 方法集合
							var module = document.body.querySelector(".calendar-box");
								module ? module.parentNode.removeChild(module) : "";
								if(data == undefined) {
									set.PromptBox("无历史记录", 2, false);
								} else {
									var mun = data.length;
									var box = document.createElement("div");
									box.id = "calendar-box";
									lay.el[0].appendChild(box).className = "calendar-box";
									for(var i = 0; i < mun; i++) {
										var mousename = document.createElement("a");
										mousename.className = "record_info";
										mousename.href = "javascript:;";
										box.appendChild(mousename).innerHTML = data[i].name;
									}
									var laybox = $(lay.el[0]).outerWidth();
									var objTop = lay.getOffsetTop(set.$('#calendar-box')); //对象x位置
									var objLeft =lay.getOffsetLeft(set.$('#calendar-box')); //对象y位置
									var mouseX = me.clientX + document.body.scrollLeft; //鼠标x位置
									var mouseY = me.clientY + document.body.scrollTop; //鼠标y位置
									var objX = mouseX - objLeft;
									var objY = mouseY - objTop;
									box.style.cssText = "display:block" + "; left:" + objX + "px" + ";" + "top:" + objY + "px";
									var infoh = $(".record_info").outerHeight()+10 * mun;
									var boxh = $(".calendar-box").outerHeight();
									var boxgap = laybox - mouseX;
									var boxw = $(box).outerWidth();
									if(boxgap <= boxw) {
										box.style.cssText = "display:block" + "; left:" + (objX - boxw) + "px" + ";" + "top:" + objY + "px";
									}
									if(infoh < boxh) {
										box.style.cssText += 'height:' + infoh + 'px;';
									} else {
										box.style.cssText += 'bottom:15px';
										$(".calendar-box").niceScroll({
											cursorcolor: "#dddddd",
											cursoropacitymax: 1,
											touchbehavior: false,
											cursorwidth: "3px",
											cursorborder: "0",
											cursorborderradius: "3px",
										});
									}
								}
							},
							monthClick: function(Event, nextMonth, opts, me) {
								// Event 当前事件  nextMonth月份,opts参数 ,me集合
								//点击月份的处理方法
								//开始月份第一天
								var start = me._cloneDate(opts.newDate);
								start.setDate(1);
								// 获取当前月的最后一天
								var date = new Date();
								var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
								var oneDay = 1000 * 60 * 60 * 24;
								var end = new Date(nextMonthFirstDay - oneDay);
								var startDate = me.transferDate(start); // 日期变换
								var endDate = me.transferDate(end); // 日期变换
								var cycleData = [{
									'name': "145",
									'startDate': "2020-2-09 15:31:29",
									'type': "手机号"
								}, {
									'name': "178956874",
									'startDate': "2020-2-23 15:31:29",
									'type': "手机号"
								}]//数据结构,以往记录数据,可通过ajax获取
								me._refreshCalendar(opts.newDate, cycleData);//加载方法
							}
					   	})
					   < /script>
				 
基础配置插件方法,改为简答的示例
数据格式
					//记录保存格式
				    {
						'name': "145",//名称
						'startDate': "2020-3-09 15:31:29",//时间
						'type': "手机号"//类型
					}
					//假日格式
					{
						"holiday_name":"春节", //节日名称
						"holiday_time":[
							"2020-1-24",
							"2020-1-25",
							"2020-1-26",
							"2020-1-27",
							"2020-1-28",
							"2020-1-29",
							"2020-1-30",
							"2020-1-31",
							"2020-2-1",
							"2020-2-2"
							]//节日时间}
				   //工作时间格式
				   [
					      "2020-4-26",
					      "2020-5-9",
					      "2020-6-28",
					      "2020-9-27",
					      "2020-10-10"
					]//直接编辑当前日期
				 
json格式,该数据格式为定死的格式。