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

        昨天做项目的时候，前端需要用到日历，使用了日历插件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" %>

<%@ include file="../common/btcss.jsp" %>
<%@ include file="../common/btjs.jsp" %>



	
	
	
	
	
	
	
	
	
	
	
	


	

		
头等舱 
		
商务舱
		
经济舱
	

	
	

		

			

				

					

				    	录入编号:
				    	
				  	
				  	

				    	录入日期:
				    	
				    	-
				    	
				  	
					Send invitation
				
			
			

		
		

			

		
		

			

		
	
	
	

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

注意：在引入css样式时，

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