昨天做项目的时候，前端需要用到日历，使用了日历插件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 events
color : '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 events
views : { //自定义显示
month : {//自定义最多显示事件数量，eventLimit为true时
eventLimit : 2
}
},
eventClick : function(event,element) {
// change the border color just for fun
var 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'>
扫一扫
3260
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
