欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

fullcalendar日志管理

程序员文章站 2022-03-10 08:21:48
工作需要，项目中需要完成一个日志工作安排的功能，网上找了好多资料，最后还是修修改改花了一些时间的 码云代码地址：https://gitee.com/yinxiuli/fullcalendar_log_management.git 主要贴一下前端部分的代码（可见git）：

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

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

fullcalendar日志管理fullcalendar日志管理

 

主要贴一下前端部分的代码（可见git）：

<!DOCTYPE html>
<html style="overflow-y:hidden">
    <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="未完成 " style="float:right;height:30px;margin:3px 7px 0; ">
                          <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 " style="display:none; ">
                     <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 " style="display: none; " 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"
    }
 
基本上就这些，如果前面没有接触过这个最开始做肯定会遇到这样那样的问题的，多看看文档就好了

上一篇： JQuery input file 上传图片

下一篇： 工业机器人网首页金币掉落特效分析及实现

推荐阅读