fullCalendar высота не работает

Итак, я интегрирую FullCalendar на свой сайт, и он отлично работает, даже если он не станет выше, чем 321px, даже если опция высоты установлена на гораздо большие номера. Это, однако, не имеет значения, поскольку ширина содержащего элемента такова, что настройки по умолчанию должны сделать его более высоким.fullCalendar высота не работает

Я использую базовый 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: '[email protected]' 
     }, 
     { 
      googleCalendarId: '[email protected]' 
     } 
    ] 
}); 

$("#thumbCal").fullCalendar({ 
    googleCalendarApiKey: 'xxxx', 
    eventSources: [ 
     { 
      googleCalendarId: '[email protected]' 
     }, 
     { 
      googleCalendarId: '[email protected]' 
     } 
    ] 
}); 


$(".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>

источник

2014-11-21 slink

Вам необходимо добавить соответствующий код, с которым у вас возникла проблема, в свой вопрос, и, если это возможно, макет проблемы с JS Fiddle или Bootply. – MattD

Я добавил соответствующий код. Я попытаюсь немного поиграть в выходные дни и посмотреть, не возникла ли там проблема. – slink

Это действительно fullcalendar.print.css, который вызывает эту ошибку. Это потому, что вы не задали «цель» для этой таблицы стилей.

Вы должны добавить 'media = "print"' в тег link. Это позволит убедиться, что эта таблица стилей используется только при печати календаря.

источник

2014-11-24 10:37:03 Nilshierhe

Спасибо! Мне не нужен медиа-тег. - S. – slink

Я буду делать некоторые, глядя в "почему", но Основной ответ таков: fullcalendar.print.css препятствует стандартным масштабированием дисплея по вертикали. Если печать css удалена, календарь отображается правильно.

источник

2014-11-22 15:18:29 slink

fullCalendar высота не работает

ответ

Смежные вопросы