插件描述：jQuery日历插件,自定义点击事件，记录信息，编辑假日安排等方法，使用简单
sys-calendar.js
jquery日历插件,自定义点击事件，记录信息，编辑假日安排等方法，使用简单，版本1.0
说明
该插件还使用了sysui.js框架插件进行配置，该js具体说明在以后会发布，请关注我的网站
基础引用
引入3个文件，一个css样式文件，两个js文件一个jquery库，另外一个就是日历插件的js
基础html
$("#calendar").calendar({
//参数设置
})
先为calendar准备一个容器，可以设置大小，也可以在options中设置，不设置的话自动设为默认
参数配置说明
$("#calendar").calendar({
data:data,//获取记录数据
holiday:holidaydata,//规划假日时间
work:workdata,//规划上班时间
mode:"month",//显示模式，month为月份详细显示，year为年显示
width:600,//日历宽度，如果不填则默认全屏模式
showModeBtn:false,//是否显示月/年却换模式
showEvent:true,//设置年份显示记录信息，为true显示每月记录信息，为false不显示记录信息
newDate:"-04-1",//设置初始开始时间，默认不填为当前时间
cellClick:function(data,Event,me){
//点击每天的处理方法，用户自己编辑方法
//data数据
//Event当前事件
//me方法集合
varmodule=document.body.querySelector(".calendar-box");
module?module.parentNode.removeChild(module):"";
if(data==undefined){
set.PromptBox("无历史记录",2,false);
}else{
varmun=data.length;
varbox=document.createElement("div");
box.id="calendar-box";
lay.el[0].appendChild(box).className="calendar-box";
for(vari=0;i
varmousename=document.createElement("a");
mousename.className="record_info";
mousename.href="javascript:;";
box.appendChild(mousename).innerHTML=data[i].name;
}
varlaybox=$(lay.el[0]).outerWidth();
varobjTop=lay.getOffsetTop(set.$('#calendar-box'));//对象x位置
varobjLeft=lay.getOffsetLeft(set.$('#calendar-box'));//对象y位置
varmouseX=me.clientX+document.body.scrollLeft;//鼠标x位置
varmouseY=me.clientY+document.body.scrollTop;//鼠标y位置
varobjX=mouseX-objLeft;
varobjY=mouseY-objTop;
box.style.cssText="display:block"+";left:"+objX+"px"+";"+"top:"+objY+"px";
varinfoh=$(".record_info").outerHeight()+10*mun;
varboxh=$(".calendar-box").outerHeight();
varboxgap=laybox-mouseX;
varboxw=$(box).outerWidth();
if(boxgap<=boxw){
box.style.cssText="display:block"+";left:"+(objX-boxw)+"px"+";"+"top:"+objY+"px";
}
if(infoh
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集合
//点击月份的处理方法
//开始月份第一天
varstart=me._cloneDate(opts.newDate);
start.setDate(1);
//获取当前月的最后一天
vardate=newDate();
varnextMonthFirstDay=newDate(date.getFullYear(),nextMonth,1);
varoneDay=1000*60*60*24;
varend=newDate(nextMonthFirstDay-oneDay);
varstartDate=me.transferDate(start);//日期变换
varendDate=me.transferDate(end);//日期变换
varcycleData=[{
'name':"145",
'startDate':"-2-0915:31:29",
'type':"手机号"
},{
'name':"178956874",
'startDate':"-2-2315:31:29",
'type':"手机号"
}]//数据结构，以往记录数据，可通过ajax获取
me._refreshCalendar(opts.newDate,cycleData);//加载方法
}
})
基础配置插件方法,改为简答的示例
数据格式//记录保存格式
{
'name':"145",//名称
'startDate':"-3-0915:31:29",//时间
'type':"手机号"//类型
}
//假日格式
{
"holiday_name":"春节",//节日名称
"holiday_time":[
"-1-24",
"-1-25",
"-1-26",
"-1-27",
"-1-28",
"-1-29",
"-1-30",
"-1-31",
"-2-1",
"-2-2"
]//节日时间}
//工作时间格式
[
"-4-26",
"-5-9",
"-6-28",
"-9-27",
"-10-10"
]//直接编辑当前日期
json格式，该数据格式为定死的格式。
如果觉得《js日历控件html jQuery日历插件sys-calendar.js》对你有帮助，请点赞、收藏，并留下你的观点哦！
