日程日历系统，顶级插件FullCalendar使用说明
简介 日程系统，繁琐的月日期开始结束计算、当前页面开始的天数（跨月）。。。等等，麻烦的事情都交给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"style="display:none;"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/nexttext navLinks:true,//canclickday/weeknamestonavigateviews editable:false, eventLimit:true,//allow"more"linkwhentoomanyevents events:'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") @ResponseBody publicList<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全程自动化
