最近开发工作日志功能刚遇到的一个新的前端控件 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();
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta content="text/html; charset=utf-8">
<jsp:include page="include.jsp"></jsp:include>
<script src='../../../libs/fullcalendar-3.9.0/lib/moment.min.js'></script>
<script src='../../../libs/fullcalendar-3.9.0/fullcalendar.js'></script>
<title>工作日志</title>
<style>
#bor {
margin: 40px 10px;
padding: 0;
font-size: 14px;
font-family: "雅黑宋体", "微软雅黑", "新宋体", "宋体";
background: rgb(255, 255, 255);
overflow: auto;
border: 1px solid #ccc;
}
#calendar {
max-width: 95%;
height:90%;
margin: 20px;
margin-bottom: 0px;
}
form {
margin:20px 30px 0 30px;
}
.fullCalendartitle{
width: 170px;
border-radius: 5px;
}
</style>
</head>
<body onkeyup="keyupFullScreen()" >
<div id='calendar' class="calendar fc"></div>
<!-- 隐藏域 -->
<form id='addWorkLog' class="layui-form layui-form-pane" style="display:none">
<div class="layui-form-item">
<label class="layui-form-label">日志作者</label>
<div class="layui-input-block">
<input type="text" name="userid" readonly="readonly" lay-verify="required" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">日志日期</label>
<div class="layui-input-block">
<input type="text" name="diarydate" readonly="readonly" lay-verify="required" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">日志标题</label>
<div class="layui-input-block">
<input type="text" name="diarytitle" lay-verify="required" class="layui-input">
</div>
</div>
<div class="layui-form-text">
<label class="layui-form-label">日志内容</label>
<div class="layui-input-block">
<textarea name="diarycontent" id='diarycontent' placeholder="请输入内容..." class="layui-textarea" autofocus="autofocus"></textarea>
</div>
</div>
</form>
</body>
<script src="../../js/jobEvaluation/workLog.js"></script>
</html>说明：
页面主要引入以下js和css,其他相关js 放在include.jsp中。
<link href="../../../libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <link href='../../../libs/fullcalendar-3.9.0/fullcalendar.min.css' rel='stylesheet' /> <link href="../../../libs/layui/css/layui.css" rel="stylesheet"> <script src="../../../libs/jquery/jquery.min.js"></script> <script src='../../../libs/fullcalendar-3.9.0/lib/moment.min.js'></script> <script src='../../../libs/fullcalendar-3.9.0/fullcalendar.js'></script> //该功能还用了layui弹窗 引入layui <script src="../../../libs/layui/layui.js"></script>
这是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希望指正！
1184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
