How do I properly load the jQuery fullcalendar plugin in a hidden div
I'm using the jQuery tools tabs to divide my page into tabs. One of those tabs contain a jQuery Fullcalendar. Because I load JavaScript last in the page for speed and to avoid flash of unstyled content, I hide the initially unseen tabs using display:none. When doing this, the fullcalendar doesn't render properly. It shows the proper buttons, but until I press the today-button, no calendar is shown. If I allow it to render into a visible div, it displays properly.
I can work around this using the tab-select events to render the calendar or by moving the calendar and tab scripts开发者_开发问答 to the head, but I'd rather if there was a more proper solution.
When the div is hidden, fullCalendar doesn't know what size it should render itself, so you just need to call the render function after you know that the div is visible.
Attach it to the show event or whatever:
$('#calendar').fullCalendar('render');
What you need to do is load the data after the link is clicked, not entirely sure but i think the issue is that the height is not set correctly after the data is loaded so it only shows the top part.
What i have done and worked for me.
$(document).ready(function() {
$("#calendareventlink").click ( function(){
loadCalendar();
});
});
function loadCalendar(){
//Do your data loading here
}
<a href="" id="calendareventlink">View Calendar</a>
I know this question is ancient, but it came out first while I was searching for the solution for the same problem.
For some reason the proposed solution with render doesn't work in some specific cases (if the inactive tab is loaded with calendar entries), so I had to refetchEvents.
The code is as follows:
$('#calendar').fullCalendar('render');
$('#calendar').fullCalendar('refetchEvents');
When you click on the tab call something like this:
$('#calendar').fullCalendar('render'); // Force the calendar to render
you must using javascript to set display none fullcalendar
something like this:
document.getElementById("test").style.display="none";
then it looks like this:
<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>
I was having trouble with the having to click the "today" button to make the calendar actually appear in a jQueryUI tab. I was able to solve the problem completely by initializing the tabs AFTER I initialized the calendar. I am, however, doing this in the head of the document, and calling all other js just before the close of the body tag. Hope that helps.
You can also call .resize() for any parent/ancestor element of the calendar -- when you know the calendar is visible ;)
I upgraded the fullcalendar.min.js to the latest version (3.9.0) and it worked for me.
i had a similar issue using easyappointments project, the solution was to call fullCalendar('render') , within a callback function after the next wizard div is showed:
JQuery Code:
// Display the next step tab (uses jquery animation effect).
var nextTabIndex = parseInt($(this).attr('data-step_index')) + 1;
$('#button-next-1').click(function () {
$(this).parents().eq(1).hide('fade', function () {
/* some code */
$('#wizard-frame-' + nextTabIndex).show('fade');
$('#calendar').fullCalendar('render');
});
});
Html Code:
<div id="wizard-frame-1" class="wizard-frame">
<div class="frame-container" style="margin-top: 20px!important">/*some code*/</div>
<div class="modal-footer fixedFooter p-l-10 p-r-10">
<button type="button" id="button-next-1" class="btn button-next btn-primary"
data-step_index="1">
<?= lang('next') ?>
<span class="glyphicon glyphicon-forward"></span>
</button>
</div>
</div>
have you tried display:hidden instead of display:none?
No idea whether it will work, but something worth trying.
加载中,请稍侯......
精彩评论