简介
日程系统，繁琐的月日期开始结束计算、当前页面开始的天数（跨月）。。。等等，麻烦的事情都交给FullCalendar，世界安静了。
官网
使用
1、页面引用
|
1
2
3
4
5
6
|
<link href=
'/contrast/assets/global/plugins/fullcalendar-3.2.0/fullcalendar.min.css'
rel=
'stylesheet'
/>
<link href=
'/contrast/assets/global/plugins/fullcalendar-3.2.0/fullcalendar.print.min.css'
rel=
'stylesheet'
media=
'print'
/>
<script src=
'/contrast/assets/global/plugins/fullcalendar-3.2.0/lib/moment.min.js'
></script>
<script src=
'/contrast/assets/global/plugins/fullcalendar-3.2.0/lib/jquery.min.js'
></script>
<script src=
'/contrast/assets/global/plugins/fullcalendar-3.2.0/fullcalendar.min.js'
></script>
<script src=
'/contrast/assets/global/plugins/fullcalendar-3.2.0/locale-all.js'
></script>
|
2、页面代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
<!-- 页面容器 -->
<div id=
'calendar'
></div>
<!-- 隐藏按钮，ajax自动请求触发验证 -->
<button id=
"zhibiao-btn"
type=
"button"
class=
"btn btn-primary"
style=
"display:none;"
data-toggle=
"modal"
data-target=
".bs-example-modal-lg"
>Large modal</button>
<script>
/**
* 业务约束（预警颜色说明）
* #指标符合率#
* 红色(#FF3333)：<95%
* 黄色(#FFCC66)：>95%
* 绿色(#CCFFCC)：=100%
* 灰色(#CCCCCC)：数据未上传
*/
$(document).ready(
function
() {
var
initialLocaleCode =
'zh-cn'
;
$(
'#calendar'
).fullCalendar({
header: {
left:
'prev,next today'
,
center:
'title'
,
right:
'month,listMonth'
},
firstDay:0,
defaultDate:
new
Date(),
locale: initialLocaleCode,
buttonIcons:
false
,
// show the prev/next text
navLinks:
true
,
// can click day/week names to navigate views
editable:
false
,
eventLimit:
true
,
// allow "more" link when too many events
events:
'warningcalendar/fhl_json'
,
eventClick:
function
(calEvent, jsEvent, view) {
seeDate = calEvent.start.format(
'YYYY-MM-DD'
);
req_zhibiaodetail(
""
);
$(
"#zhibiao-btn"
).click();
}
});
});
/**
* 获取符合率明细
*/
var
seeDate =
""
;
function
req_zhibiaodetail(JGDM,JGMC){
if
(seeDate==
""
){alert(
"查看日期不能为空。"
);
return
;}
if
(JGDM==
""
){
if
($(
"#jgList"
).html()!=undefined){
JGDM = $(
"#jgList li:eq(0)"
).attr(
"jgdm"
);
JGMC = $(
"#jgList li:eq(0)"
).text();
}
}
$.ajax({
type :
"get"
,
url :
'warningcalendar/show_fhl_detail_json'
,
dataType :
"json"
,
data : {seeDate:seeDate,JGDM:JGDM},
success :
function
(data) {
$(
'#zhibiaoDetail'
).html(data.ERRORCENTENT);
},
error :
function
(reslt) {
alert(
"您好，"
+JGMC+
"暂无符合率请查看其它机构"
);
}
});
}
</script>
|
3、后台代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
/**
* 机构符合率
*/
@SuppressWarnings
(
"unchecked"
)
@RequestMapping
(value =
"/fhl_json"
)
@ResponseBody
public
List<HashMap<String, Object>> fhlJson(HttpServletRequest request, HttpServletResponse response){
String sql =
"select t1.d \"start\", nvl(t2.\"title\", '数据未上传' ) \"title\", nvl (t2.\"color\", '#CCCCCC') \"color\" from ( select to_char ( to_date (#{startDate}, 'yyyy-MM-dd') + rownum - 1, 'yyyy-mm-dd' ) d from user_objects where to_date (#{startDate}, 'yyyy-MM-dd') + rownum - 1 <= to_date (#{endDate}, 'yyyy-MM-dd')) t1 left join ( select to_char (ERRORDATE, 'yyyy-MM-dd') \"start\", '符合率：' || trunc (sum(total) / count(total), 2) || '%' \"title\", case when trunc (sum(total) / count(total), 2) < 95 then '#FF3333' when trunc (sum(total) / count(total), 2) between 95 and 100 then '#FFCC66' when trunc (sum(total) / count(total), 2) = 100 then '#FFCC66' end as \"color\" from SYS_TONG_QUOTA_ERROR t where t .ERRORDATE >= to_date (#{startDate}, 'yyyy-MM-dd') and t .ERRORDATE <= to_date (#{endDate}, 'yyyy-MM-dd')"
;
HashMap<String, Object> prm =
new
HashMap<String, Object>();
//设置当前日历起止时间
prm.put(
"startDate"
, request.getParameter(
"start"
));
prm.put(
"endDate"
, request.getParameter(
"end"
));
//获取当前用户
HashMap<String, Object> user = (HashMap<String, Object>) request.getSession().getAttribute(SessionUtils.SESSION_USER_KEY);
//非管理只看本院
if
(
null
!=user&&user.get(
"ISADMIN"
).equals(
"yiyuan"
)){
sql+=
" and JGDM=#{jgdm}"
;
prm.put(
"jgdm"
, user.get(
"YLJGDM"
));
}
sql+=
" group by to_char (ERRORDATE, 'yyyy-MM-dd')) t2 on t1. d = t2.\"start\" where to_date(t1.d,'yyyy-mm-dd')<sysdate "
;
return
curdManager.findList(sql, prm);
}
|
FullCalendar默认提交日期开始结束：“start”“end”
返回的格式如上Sql展示
以上，Ok！
使用ajax全程不用处理，扔给FullCalendar全程自动化
本文转自 沫沫金 51CTO博客，原文链接：http://blog.51cto.com/zl0828/1934813，如需转载请自行联系原作者
