jQuery日历插件sys-calendar.js


9161 | 291  | 582 | 添加收藏 上一个 下一个
资源描述 : jQuery日历插件,自定义点击事件,记录信息,编辑假日安排等方法,使用简单
jQuery日历插件sys-calendar.js
资源详情

sys-calendar.js


jquery日历插件,自定义点击事件,记录信息,编辑假日安排等方法,使用简单,版本1.0


说明


该插件还使用了sysui.js框架插件进行配置,该js具体说明在以后会发布,请关注我的网站


基础引用


<link rel="stylesheet" href="css/record.css">   
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/sys-calendar.js"></script>

引入3个文件,一个css样式文件,两个js文件一个jquery库,另外一个就是日历插件的js


基础html


<div id="calendar"></div>//根据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格式,该数据格式为定死的格式。



指尖代码 资源每日更新 www.zjdaima.com