简介

日程系统，繁琐的月日期开始结束计算、当前页面开始的天数（跨月）。。。等等，麻烦的事情都交给FullCalendar，世界安静了。

官网

https://fullcalendar.io/

使用

1、页面引用

<linkhref='/contrast/assets/global/plugins/fullcalendar-3.2.0/fullcalendar.min.css'rel='stylesheet'/><linkhref='/contrast/assets/global/plugins/fullcalendar-3.2.0/fullcalendar.print.min.css'rel='stylesheet'media='print'/><scriptsrc='/contrast/assets/global/plugins/fullcalendar-3.2.0/lib/moment.min.js'></script><scriptsrc='/contrast/assets/global/plugins/fullcalendar-3.2.0/lib/jquery.min.js'></script><scriptsrc='/contrast/assets/global/plugins/fullcalendar-3.2.0/fullcalendar.min.js'></script><scriptsrc='/contrast/assets/global/plugins/fullcalendar-3.2.0/locale-all.js'></script>

2、页面代码

<!--页面容器--><divid='calendar'></div><!--隐藏按钮，ajax自动请求触发验证--><buttonid="zhibiao-btn"type="button"class="btnbtn-primary"data-toggle="modal"data-target=".bs-example-modal-lg">Largemodal</button><script>/***业务约束（预警颜色说明）*#指标符合率#*红色(#FF3333)：<95%*×××(#FFCC66)：>95%*绿色(#CCFFCC)：=100%*灰色(#CCCCCC)：数据未上传*/$(document).ready(function(){varinitialLocaleCode='zh-cn';$('#calendar').fullCalendar({header:{left:'prev,nexttoday',center:'title',right:'month,listMonth'},firstDay:0,defaultDate:newDate(),locale:initialLocaleCode,buttonIcons:false,//showtheprev/nexttextnavLinks:true,//canclickday/weeknamestonavigateviewseditable:false,eventLimit:true,//allow"more"linkwhentoomanyeventsevents:'warningcalendar/fhl_json',eventClick:function(calEvent,jsEvent,view){seeDate=calEvent.start.format('YYYY-MM-DD');req_zhibiaodetail("");$("#zhibiao-btn").click();}});});/***获取符合率明细*/varseeDate="";functionreq_zhibiaodetail(JGDM,JGMC){if(seeDate==""){alert("查看日期不能为空。");return;}if(JGDM==""){if($("#jgList").html()!=undefined){JGDM=$("#jgListli:eq(0)").attr("jgdm");JGMC=$("#jgListli: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、后台代码

/***机构符合率*/@SuppressWarnings("unchecked")@RequestMapping(value="/fhl_json")@ResponseBodypublicList<HashMap<String,Object>>fhlJson(HttpServletRequestrequest,HttpServletResponseresponse){Stringsql="selectt1.d\"start\",nvl(t2.\"title\",'数据未上传')\"title\",nvl(t2.\"color\",'#CCCCCC')\"color\"from(selectto_char(to_date(#{startDate},'yyyy-MM-dd')+rownum-1,'yyyy-mm-dd')dfromuser_objectswhereto_date(#{startDate},'yyyy-MM-dd')+rownum-1<=to_date(#{endDate},'yyyy-MM-dd'))t1leftjoin(selectto_char(ERRORDATE,'yyyy-MM-dd')\"start\",'符合率：'||trunc(sum(total)/count(total),2)||'%'\"title\",casewhentrunc(sum(total)/count(total),2)<95then'#FF3333'whentrunc(sum(total)/count(total),2)between95and100then'#FFCC66'whentrunc(sum(total)/count(total),2)=100then'#FFCC66'endas\"color\"fromSYS_TONG_QUOTA_ERRORtwheret.ERRORDATE>=to_date(#{startDate},'yyyy-MM-dd')andt.ERRORDATE<=to_date(#{endDate},'yyyy-MM-dd')";HashMap<String,Object>prm=newHashMap<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+="andJGDM=#{jgdm}";prm.put("jgdm",user.get("YLJGDM"));}sql+="groupbyto_char(ERRORDATE,'yyyy-MM-dd'))t2ont1.d=t2.\"start\"whereto_date(t1.d,'yyyy-mm-dd')<sysdate";returncurdManager.findList(sql,prm);}

FullCalendar默认提交日期开始结束：“start”“end”

返回的格式如上Sql展示

以上，Ok！

使用ajax全程不用处理，扔给FullCalendar全程自动化