fullcalendar日志管理

2018-02-26 08:13:35来源:cnblogs.com作者:秀逗养成记人点击

分享

工作需要,项目中需要完成一个日志工作安排的功能,网上找了好多资料,最后还是修修改改花了一些时间的

码云代码地址:https://gitee.com/yinxiuli/fullcalendar_log_management.git

主要贴一下前端部分的代码(可见git):

<!DOCTYPE html><html>    <head>        <meta charset=" UTF-8 ">        <title>员工日志</title>        <meta name="viewport " content="width=device-width, initial-scale=1.0 ">        <meta name="renderer " content="webkit ">            <link href="libs/bootstrap.css " rel="stylesheet ">       <link href="libs/font-awesome.css " rel="stylesheet ">       <link href="libs/fullcalendar/fullcalendar.css " rel="stylesheet "/>        <link href="libs/base.css " rel="stylesheet "/>     <style>            body {                padding: 0;                font-family: "Lucida Grande ",Helvetica,Arial,Verdana,sans-serif;                font-size: 14px;            }            .container{                height:100%;                overflow-y:hidden;            }            #calendar{                max-width: 1500px;                margin: 0 auto;            }               #Form{                overflow-x:hidden;            }            #startTime,#endTime,#allDay{                width:120px;                border:none;            }        </style>    </head>    <body>        <div class="row nowpos ">            <li class="col-sm-12 "><i class="glyphicon glyphicon-home "></i>所在位置:<a href="# ">我的工作</a>>><a href="#">员工日志</a>>><a href="# ">一周日志查看</a></li>        </div>        <div class="container ">            <div class="mainbox row ">                <li class="col-sm-12 titlenav ">日程安排界面</li>                <div id="calendar "> </div>                <div class="layer-hidden-line ">                     <form role="form " class="m-t-form " id="Form " >                         <input name="id " id="id " type="hidden " value=" ">                        <div class="row ">                             <div class="col-xs-1 "></div>                            <div class="col-xs-11 layer-condensed-case ">                       <div class="form-group ">                      <label for="classroomId "> 日程内容 </label>                     <select name="status " id="status" value="未完成 ">                          <option value="未完成">未完成</option>                          <option value="已完成">已完成</option>                   </select>                   <span class="input-icon icon-left ">                         <textarea class="form-control " id="content " name="title " placeholder="请输入日程内容 " data-required="true " data-descriptions="content " maxlength="50 " autoComplete='off'> </textarea>                         <i class="spl-icon-book-open "> </i>                  </span>              </div>           </div>          <div class="col-xs-1 "></div>           </div>          <div class="row ">                 <div class="col-xs-1 "></div>                 <div class="col-xs-11 layer-condensed-case timeselect ">                     <input type="text " readonly="readonly "id="startTime " name="start " data-descriptions="startTime " maxlength="50" autoComplete='off'>&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;<input type="text " readonly="readonly " id="endTime " name="end" maxlength="50 ">                 </div>                 <div class="col-xs-11 layer-condensed-case allday ">                     <input type="text " readonly="readonly " id="allDay " name="allDay "  data-descriptions="allDay " maxlength="50 " autoComplete='off'>                 </div>                 <div class="col-xs-1 "></div>             </div>             <div class="col-sm-12 form-group tcenter ">                 <input type="button " id="del " value="删除 " />                  <input type="submit " id=" " value="提交 " />                  <input type="button " id="quit " value="取消 " />               </div>             </form>             </div>            </div>        </div>        <script src="libs/jquery-2.1.1.min.js "></script>        <script src="libs/jquery.mvalidate.js "></script>        <script src="libs/jquery-ui-1.10.2.custom.min.js "></script>        <script src="libs/fullcalendar/moment.min.js "></script>        <script src="libs/fullcalendar/fullcalendar.js "></script>        <script src="libs/jquery.formautofill.js "></script>        <script src="layer/layer.js " charset="utf-8 "></script>        <script type="text/javascript ">        $(function(){            initFullCalendar();            initForm();        });        //页面加载完初始化日历        var date = new Date();        var d = date.getDate();        var m = date.getMonth();        var y = date.getFullYear();        var nowData=" ";                var mon=m+" ";        var day=d+" ";        if(mon.length=="1 "){               nowData = y+"-0 "+(date.getMonth()+1);        }else{               nowData = y+"- "+(date.getMonth()+1);        }       if(day.length=="1 "){               nowData = nowData+"-0 "+date.getDate();       }else{               nowData = nowData+"- "+date.getDate();       }         //打开新增弹出层        function openLayer(selectStart,selectEnd){            $("#id ").val(" ");            $("#del ").hide();            $('#Form')[0].reset();            $('#startTime').val(selectStart);            $('#endTime').val(selectEnd);            layer.open({                   title : '<i class="fa fa-plus "></i>&nbsp;新增日程',                   type : 1,                   fix : false,                   skin : 'layui-layer-rim',                   area : [ '400px', '250px' ],                   content : $('#Form')           });        }        //打开修改弹出层        function openEditLayer(data){            $("#id ").val(data.id);            $("#del ").show();            $('#Form')[0].reset();            $('#Form').autofill(data);            $('#startTime').val(formatDate(data.start));            $('#endTime').val(formatDate(data.end));            layer.open({                  type : 1,                  fix : false,                  skin : 'layui-layer-rim',                  area : [ '400px', '250px' ],                  content : $('#Form')         });        }                var if_allday=false; //用于判断选中的是否为整天        //初始化日程视图        function initFullCalendar(){            $('#calendar').fullCalendar({                  header: {                       left: 'prev,next today',                       center: 'title',                       right: 'month,agendaWeek,agendaDay'         },         defaultView: 'agendaWeek', //默认显示周视图         defaultDate: nowData,                  monthNames:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],          monthNamesShort:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],          dayNames:['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],          dayNamesShort:['周日', '周一', '周二', '周三', '周四', '周五', '周六'],                          allDayText:'跨天',          slotMinutes:30,          timeFormat: 'H:mm',          axisFormat: 'H(:mm)tt',          minTime:"08:00:00 ",          maxTime:"18:00:00 ",          timezone:"local ",          weekNumberTitle:'W',                         editable: false,         firstDay:1,         selectable:true,         unselectAuto:true,         unselectCancel:".layui-layer ",         events: { //加载列表              url: '<%=basePath%>employeLog/list', //加载数据列表后台地址               cache: true         },       selectHelper:true, //设置可拖动选择区域       select:function(startDate, endDate, allDay, jsEvent, view){ //拖动选择区域后触发事件            if((startDate-endDate)%86400==0){ //判断是否为整天                     if_allday=true;             }       var views = $('#calendar').fullCalendar('getView');       openLayer(formatDate(startDate),formatDate(endDate));     },      eventClick:function(event, jsEvent, view){//当点击日历中的某一日程(事件)时,触发此操作                  openEditLayer(event);         }       });   }                function formatTen(num) {            return num > 9 ? (num + " ") : ("0 " + num);        }                //日期格式化        function formatDate(date) {            var d = new Date(date);            var year = d.getFullYear();            var month = d.getMonth() + 1;            var day = d.getDate();            var hour = d.getHours();            var minute = d.getMinutes();            return year + "- " + formatTen(month) + "- " + formatTen(day) + " " + formatTen(hour) + ": " + formatTen(minute);        }        //进入下一个月视图        function next(){               $('#calendar').fullCalendar('next');        }        //初始化表单        function initForm(){               $("#Form ").mvalidate({ //表单验证               type: 2, //1表示弹框提示信息,2表示在表单下面提示信息               validateInSubmit:true, //点击提交时是否对表单进行验证               onKeyup: true,               sendForm: true,               autoFocus: true,                firstInvalidFocus: true, //未通过验证的第一个元素自动获得焦点               // 点击提交按钮时,表单通过验证触发函数                valid: function(event, options) { //点击提交按钮,若表单通过验证即触发该事件                      var obj=$('#Form').serializeObject();                      obj.allDay=if_allday;                      if(obj.id==null||obj.id==''){ //表示新增                          $.ajax({//获取数据                                  type : "post ",                                  url : '<%=basePath%>/employeLog/save',                                 data: obj,                                 dataType : 'json',                                 success: function(data) {                                          $('#calendar').fullCalendar('renderEvent', obj, true);                                 }                           });                  }else{                     $.ajax({//获取数据                           type : "post ",                           url : '<%=basePath%>/employeLog/edit',                           data: obj,                           dataType : 'json',                           success : function(data) {                                 $('#calendar').fullCalendar('updateEvent', obj);                          }                      });              }           },         // 点击提交按钮时,表单未通过验证触发函数         invalid: function(event, status, options) { //点击提交按钮,若表单未通过验证即触发该事件              layer.msg("日程内容不能为空! ", { icon: 0 });         },         // 点击提交按钮时,表单每个输入域触发这个函数 this 执向当前表单输入域,是jquery对象         eachField: function(event, status, options) {                 },         eachValidField: function(val) {},         eachInvalidField: function(event, status, options) {},         conditional: {                 },         descriptions : {             content : {             required : '<i class="spl-icon-volume-1 "></i>&nbsp;请填写日程内容'             }         }         });        }                //表单        $.fn.serializeObject = function() {               var o = {};               var a = this.serializeArray();               $.each(a, function() {                  if (o[this.name] !== undefined) {                       if (!o[this.name].push) {                              o[this.name] = [o[this.name]];                        }                    o[this.name].push(this.value || '');                  } else {                     o[this.name] = this.value || '';                  }     });            return o;     };         //删除        $("#del ").click(function(){            var id=$("#id ").val();             layer.confirm('您确定删除该日程吗?', function(){                  $.ajax({//获取数据                     type : "POST ",                     url : '<%=basePath%>/employeLog/delete?id='+id,                     dataType : 'json',                     success : function(data) {                   }                 });            layer.closeAll();            layer.msg("删除成功! ", { time : 2000, icon : 1});            $('#calendar').fullCalendar('removeEvents', id);          });        });        $("#quit ").click(function(){            layer.closeAll();        });        </script>    </body></html> 自己在做的过程中要注意的几个问题:1、判断当前选中的是否为跨天,在网上找了很多也没看到合适的,索性直接用结束时间和开始时间的差值除一天的秒数来判断的2、一定要设置timezone:"local "这个属性,这个表示的是选择时区,最开始没写,选中的时间和显示时间总是相差8个小时3、个人认为新增和修改其实可以使用同一个接口的,但是我们后台已经做了我也就没说让改了,判断id就可以了4、form表单用serializeObject()方法,最开始网上找的也是这个,但是不知道是我下载文件的原因还是什么总是找不到,所以直接在网上找到这个方法直接贴上面去就好了 后台数据格式:{
        "allDay":false,
        "department":"",
        "departmentId":"1",
        "end":1519358400000,
        "id":"084be04f695f4d529b3c9a4db5e9c038",
        "logDate":1519315200000,
        "start":1519349400000,
        "status":"未完成",
        "title":" 888"
    },
    {
        "allDay":false,
        "department":"",
        "departmentId":"1",
        "end":1518147000000,
        "id":"1",
        "logDate":1518105600000,
        "start":1518138000000,
        "status":"未完成",
        "title":"111111111111111111111111111111111111111",
        "weeks":"6"
    } 基本上就这些,如果前面没有接触过这个最开始做肯定会遇到这样那样的问题的,多看看文档就好了

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台