Question

所以，我将FullCalendar整合到我的网站中，并且它的工作正常，除非它不会高于321px，即使高度选项设置为更大的数字。然而，这是无关紧要的，因为包含元素的宽度使得默认设置应该使其更高。

我使用基本的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>

Answer 1

确实是fullcalendar.print.css导致了这个错误。这是因为您没有为此样式表设置“目标”。

您应该在link-tag中添加'media =“print”'。这将确保仅在打印日历时使用此样式表。

Answer 2

我会做一些调查＆＃34;为什么，＆＃34;但基本答案是：fullcalendar.print.css干扰垂直标准显示缩放。如果删除了打印css，日历将正确显示。

fullCalendar高度不起作用

2 个答案: