fullcalendar日志管理
程序员文章站
2022-06-22 13:07:32
工作需要，项目中需要完成一个日志工作安排的功能，网上找了好多资料，最后还是修修改改花了一些时间的 码云代码地址：https://gitee.com/yinxiuli/fullcalendar_log_management.git 主要贴一下前端部分的代码（可见git）：
工作需要，项目中需要完成一个日志工作安排的功能，网上找了好多资料，最后还是修修改改花了一些时间的
码云代码地址：https://gitee.com/yinxiuli/fullcalendar_log_management.git
主要贴一下前端部分的代码（可见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'> 至 <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> 新增日程',
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"
}
"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"
}
基本上就这些，如果前面没有接触过这个最开始做肯定会遇到这样那样的问题的，多看看文档就好了
上一篇： PHP的数据类型和魔术常量