个人中心
gpt4 book ai didi

jquery - fullCalendar 高度不起作用

转载 作者：行者123 更新时间：2023-12-01 02:19:47 24 4
gpt4 key购买 nike

所以，我正在将 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/

24 4 0
文章推荐： javascript - JavaScript 中的 [[ param1, param2 ... ]] 结构是什么？
文章推荐： javascript - jQuery - 阻止用户输入字符 '>' 但允许句号
文章推荐： javascript - 浏览器控制台中的 navigator "object"和 Navigator "Function"有什么区别
文章推荐： jquery - 如何仅验证英文字母字符
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com