所以，我正在将 FullCalendar 集成到我的网站中，它工作正常，除了高度不会超过 321 像素，即使高度选项设置为更大的数字也是如此。然而，这无关紧要，因为包含元素的宽度使得默认设置应该将其渲染得更高。
我正在使用基本的 Bootstrap 3，媒体查询重置为大于正常值 - 但这会影响宽度，而不是高度，并且它会渲染父面板的整个宽度。我检查了 CSS 是否有任何错误或冲突，但似乎不存在。我什至不知道从哪里开始发布代码，因为我没有进行任何修改。
帮忙？我还应该看看其他地方吗？
以下是该网站的自定义 JavaScript 部分:
$(document).ready(function(){
// $('#calendarThumb').DataTable();
// $('#eventCalendar').DataTable( {paging: false, ordering: false, info: false, lengthChange: false, searching: false });
$("#eventCal").fullCalendar({
googleCalendarApiKey: 'xxxx',
eventSources: [
{
googleCalendarId: 'xxxx@group.calendar.google.com'
},
{
googleCalendarId: 'xxxx@group.calendar.google.com'
}
]
});
$("#thumbCal").fullCalendar({
googleCalendarApiKey: 'xxxx',
eventSources: [
{
googleCalendarId: 'xxxx@group.calendar.google.com'
},
{
googleCalendarId: 'xxxx@group.calendar.google.com'
}
]
});
$(".list-group-item").click(function(event) {
$(".list-group-collapse").collapse('hide');
});
var table = $('#datatable').DataTable( {ordering: true, paging: true });
var tt = new $.fn.dataTable.TableTools( table );
$( tt.fnContainer() ).insertBefore('div.dataTables_wrapper');
$(function () { $("[data-toggle='tooltip']").tooltip(); });
$('#imgModal').modal({'backdrop': true});
});
$('.carousel').carousel({
interval: 7000
});
function modalPop(id) {
var src = $(id).attr('src');
var img = '<img src="' + src + '" class="img-responsive"/>';
$('#imgModal').modal();
$('#imgModal').on('shown.bs.modal', function(){
$('#imgModal .modal-body').html(img);
});
$('#imgModal').on('hidden.bs.modal', function(){
$('#imgModal .modal-body').html('');
});
};
$('.modalLink').on('click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$(".modal-body").html('<iframe width="100%" height="100%" frameborder="0" scrolling="yes" allowtransparency="true" src="'+url+'"></iframe>');
});
$('#myModal').on('show.bs.modal', function () {
$(this).find('.modal-dialog').css({
width:'85%x', //choose your width
height:'98%',
'padding':'0'
});
$(this).find('.modal-content').css({
height:'100%',
'border-radius':'0',
'padding':'0'
});
$(this).find('.modal-body').css({
width:'auto',
height:'100%',
'padding':'0'
});
})
以及页面代码:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://www.testsite.com/resources/css/bootstrap.min.css">
<link rel="stylesheet" href="http://www.testsite.com/couch/addons/data-bound-form/datetime.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css">
<link rel="stylesheet" href="http://www.testsite.com/resources/css/lavish-css.css">
<!--<link rel="stylesheet" href="http://www.testsite.com/resources/css/calendar.css">-->
<link rel="stylesheet" href="http://www.testsite.com/resources/css/jquery.smartmenus.bootstrap.css">
<link href="http://www.testsite.com/resources/css/icon-styles.css" rel="stylesheet">
<link href="http://www.testsite.com/resources/fullcalendar/fullcalendar.min.css" rel="stylesheet">
<link href="http://www.testsite.com/resources/fullcalendar/fullcalendar.print.css" rel="stylesheet">
<link href="http://www.testsite.com/events_rss.php" rel="alternate" type="application/rss+xml" title="Upcoming Events at GCHRL">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
<!--[if IE]
.navbar-nav > li {
float: left;
}
navbar-form .input-group-btn,
.navbar-form .input-group-addon {
width: auto;
}
<![endif]-->
</style>
<style>
body {
padding-top: 64px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
div.c-wrapper{
width: 95%; /* for example */
height: 500px;
margin: auto;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img{
margin: auto;
}
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
.navbar > .n-wrapper {
width: 98%;
}
.carousel_item {
height: 500px;
width: 800px;
}
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
.modal-dialog {
position: absolute;
left: 50%;
left-margin: -300px;
}
</style>
</head>
<body>
<div class="container-fluid">
<cms:embed 'menu.html' />
<div class='panel panel-primary'>
<div class="panel-body">
<cms:if k_is_page || k_is_archive || k_is_folder>
<cms:embed 'cal_archive.html' />
<cms:else />
<div id="eventCal" ></div>
</cms:if>
</div>
<div class='panel-footer'>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://www.testsite.com/resources/js/bootstrap.min.js"></script>
<script src="http://www.testsite.com/resources/js/jquery.smartmenus.bootstrap.min.js"></script>
<script src="http://www.testsite.com/resources/js/jquery.smartmenus.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.3/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/tabletools/2.2.3/js/dataTables.tableTools.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="http://www.testsite.com/resources/fullcalendar/lib/moment.min.js"></script>
<script src="http://www.testsite.com/resources/fullcalendar/lib/jquery-ui.custom.min.js"></script>
<script src="http://www.testsite.com/resources/fullcalendar/fullcalendar.min.js"></script>
<script src="http://www.testsite.com/resources/fullcalendar/gcal.js" ></script>
<script src="http://www.testsite.com/resources/js/custom.js"></script>
</div>
</div>
</div>
</body>
最佳答案
确实是 fullcalendar.print.css 导致了此错误。 这是因为您没有为此样式表设置“目标”。
您应该将“media="print””添加到链接标记中。这将确保仅在打印日历时使用此样式表。
关于jquery - fullCalendar 高度不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27071025/