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

最新推荐文章于 2024-07-19 08:21:12 发布

wcfeng_9527

最新推荐文章于 2024-07-19 08:21:12 发布

阅读量6.3k

点赞数 4

分类专栏： java

本文链接：https://blog.csdn.net/wcfeng_9527/article/details/50910767

版权

昨天做项目的时候，前端需要用到日历，使用了日历插件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.47元/天解锁文章