bootstrap 标签页与fullcalendar 日历插件联合使用时出现隐藏页不显示日历的解决办法

来源：互联网发布：1737棋牌源码编辑：程序博客网时间：2024/04/24 10:53

昨天做项目的时候，前端需要用到日历，使用了日历插件fullcalendar ，功能很强大。同时前台使用的bootstrap 的标签页形式显示多个日历，但是当整合到一起后，发现只有默认显示的第一页的日历出现了，当打开其他的标签页时，日历只有头部显示，而日历信息却不显示了。后来通过官方文档的学习，找到了原因。

原来fullcalendar是不支持在隐藏的元素上渲染日历的，所以其他的隐藏的标签页中就没办法把日历给加载出来了。那么解决办法就有了，在其他标签页显示的时候再加载一下日历就好了。

fullcalendar有一个属性方法：render，说明是：$(‘.selector’).fullCalendar(‘render’): 该方法用来立刻渲染整个日历, 在一个可见的元素上调用fullCalendar的时候, 该方法会自动调用, 如果是在一个隐藏的元素上调用, 则需要尽快的手动调用使该元素可见并渲染.

那么只需要在显示标签页的时候调用该方法即可。

下面是解决后的页面：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ include file="../common/taglibs.jsp" %><c:set var="ctx" value="${pageContext.request.contextPath}" /><%@ include file="../common/btcss.jsp" %><%@ include file="../common/btjs.jsp" %><!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="${ctx }/static/lib/weekdatepicker/css/default.css"><link rel="stylesheet" href="${ctx }/static/lib/datatables/1.10.9/css/jquery.dataTables.min.css"><link rel="stylesheet" href="${ctx }/static/lib/fullcalendar/fullcalendar.css"  ><link rel="stylesheet" href="${ctx }/static/lib/fullcalendar/fullcalendar.print.css" media='print'><script type="text/javascript" src="${ctx}/static/lib/fullcalendar/moment.min.js"></script><script type="text/javascript" src="${ctx}/static/lib/fullcalendar/fullcalendar.min.js"></script><script type="text/javascript" src="${ctx}/static/lib/fullcalendar/lang-all.js"></script><script type="text/javascript" src="${ctx}/static/lib/layer/layer.js"></script><style type="text/css">a:focus {outline:none;-moz-outline:none;} .myCalendar {max-width: 1100px;margin: 10 10px;}body {margin: 0px 0px;padding: 0;font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;font-size: 14px;}</style><title>世界玖玖包机管理理系统</title></head><body><ul id="myTab" class="nav nav-tabs"><li style="padding:3 5 0 10;" class="active"><a href="#firstClassCabin" data-toggle="tab">头等舱 </a></li><li style="padding:3 5 0 5;"><a id="businessCabina" href="#businessCabin" data-toggle="tab">商务舱</a></li><li style="padding:3 5 0 5;"><a id="touristClassa"  href="#touristClass" data-toggle="tab">经济舱</a></li></ul><!-- Tab panes --><div id="myTabContent" class="tab-content"><div  class="tab-pane fade in active" id="firstClassCabin"><div class="container" style="margin-top: 40px;margin-left:5px; margin-bottom: 10px;"><form class="form-inline" id="searchRoleForm" action="${ctx }/rolemanager/queryRole" method="post"><div class="form-group" style="margin-right:5px;">    <label for="exampleInputName2">录入编号:</label>    <input type="text" class="form-control" id="fid" placeholder="输入产品编号...">  </div>  <div class="form-group">    <label for="exampleInputEmail2">录入日期:</label>    <input type="text" class="form-control" id="startdate" >    <label for="exampleInputEmail2">-</label>    <input type="text" class="form-control" id="enddate" >  </div><button type="submit" class="btn btn-default">Send invitation</button></form></div><div class="myCalendar" id='firstClassCabin_calendar'></div></div><div  class="tab-pane fade " id="businessCabin"><div class="myCalendar" id='businessCabin_calendar'></div></div><div  class="tab-pane fade " id="touristClass"><div class="myCalendar" id='touristClass_calendar'></div></div></div><script type="text/javascript">$(document).ready(function() {$("#firstClassCabin_calendar").fullCalendar({header : {left : 'prev,next ,today',center : '',right : 'title'},eventLimit:true,views : { //自定义显示month : {//自定义最多显示事件数量，eventLimit为true时eventLimit : 2},},aspectRatio : 1.8,lang : 'zh-cn',//语言，需要引入lang-all.js 包firstDay : 0,//起始日期，0：周日，1：周一defaultDate : '2016-01-12',//默认日期eventClick : function(event,element) {var title = prompt('Event Title:');if (title) {event.title = title;$('#firstClassCabin_calendar').fullCalendar('updateEvent',event);}},eventRender : function(event,element) {var html =  "<table><tr><td>成人价格￥：</td><td>1000</td></tr>"+"<tr><td>儿童价格￥：</td><td>1000</td></tr>"+"<tr><td>婴儿价格￥：</td><td>1000</td></tr></table>";element.html(html);},eventBackgroundColor:"#fff",events : [{title : 'Meeting',start : '2016-01-12T14:30:00'},{title : 'Happy Hour',start : '2016-01-12T17:30:00'},{title : 'Dinner',start : '2016-01-12T20:00:00'},{title : 'Birthday Party',start : '2016-01-13T07:00:00'},{title : 'Click for Google',url : 'http://google.com/',start : '2016-01-28'} ]});$("#businessCabin_calendar").fullCalendar({header : {left : 'prev,next ,today',center : '',right : 'title'},aspectRatio : 1.8,lang : 'zh-cn',//语言，需要引入lang-all.js 包firstDay : 0,//起始日期，0：周日，1：周一defaultDate : '2016-01-12',//默认日期editable : true,eventLimit : true, // allow "more" link when too many eventscolor : 'yellow', // an option!textColor : 'black', // an option!allDaySlot : true,views : { //自定义显示month : {//自定义最多显示事件数量，eventLimit为true时eventLimit : 2},agendaFourDay : {type : 'agenda',duration : {days : 1},buttonText : '4 day'}},eventClick : function(event,element) {var title = prompt('Event Title:');if (title) {$('#businessCabin_calendar').fullCalendar('updateEvent',event);}},eventRender : function(event,element) {var html =  "<table><tr><td>成人价格￥：</td><td>1000</td></tr>"+"<tr><td>儿童价格￥：</td><td>1000</td></tr>"+"<tr><td>婴儿价格￥：</td><td>1000</td></tr></table>";element.html(html);},events : [{title : 'All Day Event',start : '2016-01-01'},{title : 'Long Event',start : '2016-01-07',end : '2016-01-10'},{title : 'Click for Google',url : 'http://google.com/',start : '2016-01-28'} ]});$("#touristClass_calendar").fullCalendar({header : {left : 'prev,next ,today',center : '',right : 'title'},aspectRatio : 1.8,lang : 'zh-cn',//语言，需要引入lang-all.js 包firstDay : 0,//起始日期，0：周日，1：周一defaultDate : '2016-01-12',//默认日期eventLimit : true, // allow "more" link when too many eventsviews : { //自定义显示month : {//自定义最多显示事件数量，eventLimit为true时eventLimit : 2}},eventClick : function(event,element) {// change the border color just for funvar title = prompt('Event Title:');if (title) {event.title = title;$('#touristClass_calendar').fullCalendar('updateEvent',event);}},eventRender : function(event,element) {var html =  "<table><tr><td>成人价格￥：</td><td>1000</td></tr>"+"<tr><td>儿童价格￥：</td><td>1000</td></tr>"+"<tr><td>婴儿价格￥：</td><td>1000</td></tr></table>";element.html(html);},events : [{id : 999,title : 'Repeating Event',start : '2016-01-16T16:00:00'},{title : 'Conference',start : '2016-01-11',end : '2016-01-13'},{title : 'Meeting',start : '2016-01-12T10:30:00',end : '2016-01-12T12:30:00'},{title : 'Lunch',start : '2016-01-12T12:00:00'},{title : 'Meeting',start : '2016-01-12T14:30:00'},{title : 'Happy Hour',start : '2016-01-12T17:30:00'}]});//由于日志无法在隐藏的div中加载，所以在显示的时候加载一次var businessCabinIsloaded = false;$("#businessCabina").on('shown.bs.tab',function(e) {if(!businessCabinIsloaded){        console.log("加载了111");$("#businessCabin_calendar").fullCalendar('render');        businessCabinIsloaded = true;}});var touristClassIsloaded = false;$("#touristClassa").on('shown.bs.tab',function(e) {if(!touristClassIsloaded){console.log("加载了222");    $("#touristClass_calendar").fullCalendar('render');}});});</script></body></html>

bootstrap 标签页有一个属性 shown.bs.tab ，即在显示完成后做的操作。可以在这里将日历加载上，同时增加判断，只加载一次。

注意：在引入css样式时，

<link rel="stylesheet" href="${ctx }/static/lib/fullcalendar/fullcalendar.print.css" media='print'>

必须要加上 media='print' 这句话，要不然会出现样式混乱的问题。

0 0