使用FullCalendar控件实现日志行程功能
最近开发工作日志功能刚遇到的一个新的前端控件 FullCalendar ；
这有个不错的中文文档！
这是官网下载路径！
忘了重要的事，补充下效果图
废话不多说看代码：
这是页面
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath();
%>
工作日志
说明：
页面主要引入以下js和css,其他相关js 放在include.jsp中。
//该功能还用了layui弹窗 引入layui
这是js
var servicename=CONF_JOBEVALUATION_SERVIERURL;
var form;
var layer;
var table;
//获取登录人
var users;
var username;
var userid;
var statu=null;
var addWorkLogForm=$('#addWorkLog');
var workLog=null;
$(document).ready(function() {
layui.use(['form','layer','table'], function(){
form = layui.form;
layer= layui.layer;
table=layui.table;
});
//获取登录人
users = JSON.parse($.cookie('cookieuser'));
username = users.user.realname;
userid = users.user.id;
initFullCalendar();
});
function initFullCalendar(){
$('#calendar').fullCalendar({
defaultView:"month", //进入组件默认渲染的视图，默认为month
header: {
left: 'prev,next today', //上一页、下一页、今天
center: 'title', //居中：时间范围区间标题
right: 'month' //右边：显示哪些视图 ,agendaWeek,agendaDay,listWeek
},
buttonText : {//对应顶部操作按钮的名称自定义
prev:'<上一页',
next:'下一页>',
today:'今天',
month:'月',
week:'周',
day:'日',
listWeek:'列表'
},
aspectRatio : 2, //宽度:高度 比例，默认1.35，可自定义
handleWindowResize:true, //是否随浏览器窗口大小变化而自动变化。
firstDay : 1, //视图从每周几开始，默认0为周日，1为周1，2为周2，依此类推
unselectAuto:true, //当点击页面日历以外的位置时，是否自动取消当前的选中状态。
axisFormat: 'H(:mm)tt', //设置日历agenda视图下左侧的时间显示格式，默认显示如：5:30pm
nowIndicator : false, //周/日视图中显示今天当前时间点（以红线标记），默认false不显示
timeFormat : "YYYY-MM-DD", //全局的日期显示格式(自定义成如12:00或12am等)
titleFormat : "YYYY"+"年"+"MM"+"月", //顶部title区域格式化
monthNames : ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //月份自定义命名
monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //月份缩略命名（英语比较实用：全称January可设置缩略为Jan）
dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //同理monthNames
dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //同理monthNamesShort
weekNumberTitle : "周", //周的国际化,默认为"W"
eventLimit: true,
allDayDefault:false,
dayClick: function(date, jsEvent, view) {//单击日历中的某一天时触发 新增时
var workLog={};
var nowdate=new Date().format("yyyy-MM-dd");
var nowtime = new Date(nowdate).getTime();
var clickDate=date._i;
var diarydate=date.format();
//根据日志日志得到当前日志对象
var _workLog=workLogByWldate(diarydate);
if(nowtime>=clickDate){
//判断当前日志是否为空
if(_workLog){
statu="更新";
alertWorkLog(_workLog);
}else{
statu="新增";
workLog.diarydate=diarydate;
alertWorkLog(workLog);
}
}else{
layer.msg("未到时间！",{icon: 2,offset: '250px'});
}
},
//基于function的数据获取，通常是在切换上一页、下一页、视图切换时触发，非常适合动态数据获取
events: function(start, end, timezone, callback) {//日历初始化数据渲染
initMonthViewData(start,end,callback);
},
eventClick: function(event, jsEvent, view) {//日程区块单击时触发 更新时
var wlid=event.id;
var currdiarydate=event.start.format();
//得到当前日志对象
var wk=workLogByWldate(currdiarydate);
//判断当前日志是否为空
if(wk){
statu="更新";
}else{
workLog.diarydate=currdiarydate;
statu="新增";
}
alertWorkLog(workLog);
},
eventMouseover: function(calEvent, jsEvent, view){//鼠标在日程区块上时触发
$(this).css('background-color', '#0096EB');
},
eventMouseout: function(calEvent, jsEvent, view){//鼠标从日程区块离开时触发
$(this).css('background-color', 'gray');
}
});
};
function initWorkLogFormData(layero,workLog){
var f_userid=layero.find("input[name=userid]");
var f_diarydate=layero.find("input[name=diarydate]");
var f_diarytitle=layero.find("input[name=diarytitle]");
var f_diarycontent=layero.find("#diarycontent");
if(statu=="新增"){
//日志作者页面显示为名字 数据库存入userid
f_userid.val(username);
f_diarydate.val(workLog.diarydate);
f_diarytitle.val(workLog.diarydate+"日志");
f_diarycontent.val("");
}else if (statu=="更新"){
//通过id查出当前日志作者名
f_userid.val(workLog.author);
f_diarydate.val(workLog.diarydate);
f_diarytitle.val(workLog.diarytitle);
f_diarycontent.val(workLog.diarycontent);
}
form.render();
}
//获取弹窗里面的日志表单数据
function getAlertWorkLog(layero){
var workLog;
var diarydate=layero.find("input[name=diarydate]").val();
var diarytitle=layero.find("input[name=diarytitle]").val();
var diarycontent=layero.find("#diarycontent").val();
if(statu=="新增"){
workLog={
diaryid:uuid(),
userid:userid,
diarydate:diarydate,
diarytitle:diarytitle,
diarycontent:diarycontent
}
}else if (statu=="更新"){
workLog={
diarytitle:diarytitle,
diarycontent:diarycontent,
modifydate:new Date(),
modifyuserid:userid,
modifyusername:username
}
}
return workLog;
}
//"新增"日志时补全日志数据
function MakeupNewWorkLog(workLog){
workLog.createdate=new Date();
workLog.createuserid=userid;
workLog.createusername=username;
return workLog;
}
function refetchEvents(){
$('#calendar').fullCalendar('refetchEvents');
}
//根据id查询日志
function workLogByWldate(id){
$.ajax({
cache:false,
async: false,
type:"GET",
url:servicename+global.modelctls.jobEvaluation.logManage.workLogByWldate,
data:{diarydate:id},
contentType: "application/json",
dataType: 'JSON',
success:function(data){
workLog=data;
},
error:function(error){
workLog='';
}
})
return workLog;
}
/**
* 生成UUID
*
* @returns uuid
*/
function uuid(){
var s = [];
var hexDigits = "0123456789abcdef";
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
s[14] = "4";
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
s[8] = s[13] = s[18] = s[23] ="-";
var uuid = s.join("");
return uuid;
}
function initMonthViewData(start,end,callback){
$.ajax({
cache:false,
type:"POST",
url: servicename+global.modelctls.jobEvaluation.workLog.monthView,
contentType: "application/json",
dataType: 'JSON',
data: JSON.stringify({
'start': start.format(),
'end': end.format(),
'userid':userid //查询当前登录用户自己的日志
}),
success: function(monthLog) {
var events = [];
$.each(monthLog, function (index, worklog) {
events.push({
id:worklog.diaryid,
title:worklog.diarycontent,
start:worklog.diarydate,
backgroundColor:'gray',
allDay:true,
className:"fullCalendartitle"
});
})
callback(events);
$('.fc-content').css("white-space","inherit"); //修复内容超过一行不自动换行问题
}
});
}
//弹出日志填写表单
function alertWorkLog(workLog){
var oldwklog=workLog;
var lay=null;
layer.open({
type: 1,
title: statu+'日志',
area: ['600px', '450px'],
shade: 0,
offset: '120px',
content: $('#addWorkLog'),
btn:['确定','关闭'],
success: function(layero, index){
initWorkLogFormData(layero,oldwklog);
lay=layero;
},
yes:function (index, layero){
if (statu=="新增"){
var wlg=getAlertWorkLog(layero);
var newWorkLog=MakeupNewWorkLog(wlg);
addWorkLog(newWorkLog);
}else if(statu=="更新"){
var upworkLog=getAlertWorkLog(layero);
upworkLog.diaryid=oldwklog.diaryid;
updateWorkLog(upworkLog);
}
layer.close(index);
}
});
return lay;
}
//新增
function addWorkLog(workLog){
$.ajax({
url:servicename+global.modelctls.jobEvaluation.logManage.add,
type:"post",
data:JSON.stringify(workLog),
contentType: "application/json",
success:function(data){
if(data){
layer.msg("新增日志成功！",{icon: 1,offset: '120px' });
refetchEvents();//重新渲染控件
}else{
layer.msg("新增日志失败！",{icon: 5,offset: '120px'});
}
},
error:function(error){
layer.msg("新增日志失败！",{icon: 5,offset: '120px'});
}
})
}
//更新
function updateWorkLog(workLog){
$.ajax({
url:servicename+global.modelctls.jobEvaluation.logManage.update,
type:"post",
data:JSON.stringify(workLog),
contentType: "application/json",
success:function(data){
if(data){
layer.msg("更新成功！",{icon: 1,offset: '120px' });
refetchEvents();//重新渲染控件
}else{
layer.msg("更新失败！",{icon: 5,offset: '120px'});
}
},
error:function(error){
layer.msg("新增日志失败！",{icon: 5,offset: '120px'});
}
})
}
说在后面：
FullCalendar控件还是很强大的，业务需要我只用到了月视图，还有周、天、年、列表，应对不同的需求，第一次使用还有很多不足，有BUG希望指正！