说明
该插件还使用了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);//加载方法="" }="" })="" <="" cript="">
基础配置插件方法,改为简答的示例
数据格式
//记录保存格式 { '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格式,该数据格式为定死的格式。