fullcalendar日志管理

作者: 达?矢抾哆拉?
来源: 51数据库
2021-08-27

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

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

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

<!DOCTYPE html>

<head>

<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>

<li class="col-sm-12 "><i class="glyphicon glyphicon-home "></i>所在位置：<a ">我的工作</a>>><a ">员工日志</a>>><a ">一周日志查看</a></li>

</div>

<li class="col-sm-12 titlenav ">日程安排界面</li>

</select>

</span>

</div>

</div>

</div>

</div>

</div>

</div>

</form>

</div>

$(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> 新增日程',

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> 请填写日程内容'

}

});

}

//表单

$.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"
    }

基本上就这些，如果前面没有接触过这个最开始做肯定会遇到这样那样的问题的，多看看文档就好了