说明
该插件还使用了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格式，该数据格式为定死的格式。