Я использую вкладки инструментов jQuery для разделения моей страницы на вкладки. Один из этих вкладок содержит jQuery Fullcalendar. Поскольку я загружаю JavaScript на странице на скорости и избегаю вспышки неравномерного содержимого, я скрываю первоначально невидимые вкладки, используя display: none. При этом полный календар не отображается должным образом. Он показывает правильные кнопки, но пока я не нажимаю кнопку "Сегодня", календарь не отображается. Если я разрешаю его визуализировать в видимый div, он отображается правильно.
Я могу обойти это, используя события выбора табуляции для рендеринга календаря или перемещения сценариев календаря и вкладок в голову, но я предпочел бы, если бы было более подходящее решение.
Что вам нужно сделать, это загрузить данные после щелчка ссылки, но не полностью уверен, но я думаю, что проблема в том, что высота не установлена правильно после загрузки данных, поэтому она отображает только верхнюю часть.
Что я сделал и работал у меня.
$(document).ready(function() {
$("#calendareventlink").click ( function(){
loadCalendar();
});
});
function loadCalendar(){
//Do your data loading here
}
<a href="" id="calendareventlink">View Calendar</a>
Когда div скрыт, fullCalendar не знает, какой размер он должен отображать, поэтому вам просто нужно вызвать функцию render после того, как вы узнаете, что div виден.
Прикрепите его к событию show или что-то еще:
$('#calendar').fullCalendar('render');
вы должны использовать javascript для установки отображения none fullcalendar
что-то вроде этого:
document.getElementById("test").style.display="none";
тогда он выглядит так:
<html>
<head>
<link rel='stylesheet' type='text/css' href='bigcalendar.css' />
<script type='text/javascript' src='jquery-1.8.1.min.js'></script>
<script type='text/javascript' src='bigcalendar.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#bigCalendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: false,
events: [{"id":111,"title":"Event1","start":"2012-11-10","url":"http:\/\/yahoo.com\/"},{"id":222,"title":"Event2","start":"2012-11-20","end":"2012-11-22","url":"http:\/\/yahoo.com\/"}]
});
document.getElementById("test").style.display="none";
});
function closeEventDetails(){
$("#test").hide("fast");
}
function showBigCalendar(){
$("#test").show("fast");
// $('#bigCalendar').fullCalendar( 'render' )
}
$(document).ready(function() {
});
</script>
<style type='text/css'>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#bigcalendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<!--zobrazenie velkeho kalendara-->
<button onclick="showBigCalendar();" >open</button>
<button onclick="closeEventDetails();">close</button>
<div id="test" ><div id="bigCalendar" ></div></div>
</body>
Когда вы нажимаете на вкладку, вызовите что-то вроде этого:
$('#calendar').fullCalendar('render'); // Force the calendar to render
У меня возникли проблемы с нажатием кнопки "Сегодня", чтобы календарь появился на вкладке jQueryUI. Я смог полностью решить проблему, инициализируя вкладки ПОСЛЕ того, как я инициализировал календарь. Я, однако, делаю это в начале документа и называя все остальные js незадолго до закрытия тега тела. Надеюсь, это поможет.
Вы также можете вызвать .resize() для любого элемента parent/ancestor в календаре - когда вы знаете, что календарь виден;)
Я знаю, что этот вопрос древний, но он вышел первым, когда я искал решение той же проблемы.
По какой-то причине предлагаемое решение с render не работает в некоторых конкретных случаях (если на неактивной вкладке загружены записи календаря), поэтому мне пришлось refetchEvents.
Код выглядит следующим образом:
$('#calendar').fullCalendar('render');
$('#calendar').fullCalendar('refetchEvents');
Вы пробовали отображение: скрыто вместо отображения: none?
Не знаю, будет ли это работать, но что-то стоит попробовать.