Fullcalendar在第一次加載時的大小錯誤

每當您打開瀏覽器時，第一次加載fullcalendar時出現問題。當我刷新頁面時，它一切正常。Fullcalendar在第一次加載時的大小錯誤

這是錯誤的大小。不是框架的大小，而是內容。

這是它的外觀： This is what it looks like

我已經閱讀文檔，但我找不到這事。

這纔是我的jquery：

$('#kalender1').fullCalendar({ 


    firstDay: 1, 
    header: {right:'today prev,next month,agendaWeek'} , 
    defaultView: 'agendaWeek', 
    // timeFormat: 'h(:mm)', // uppercase H for 24-hour clock 
    minTime:'6' , 
    maxTime: '21' , 
    eventResize: function(event,dayDelta,minuteDelta,revertFunc) { 

var internidevent = event.value 
var minutes = minuteDelta 
var whataction = 4 
//alert(minuteDelta) 

$.post('save.asp', {whataction:whataction, internidevent:internidevent, minutes:minutes}) 
    }, 
    eventClick: function(calEvent, jsEvent, view) { 

    //alert('Event: ' + calEvent.title); 
    //alert('id: ' + calEvent.value + ''); 
    var sellerid = <%=value%> 
    var event = calEvent.value 

    $.colorbox({href:"editevent.asp?sellerid="+sellerid+'&event='+event, iframe:"true",width:"800", height:"800"}) 


    // change the border color just for fun 
    $(this).css('border-color', 'red'); 

}, 
eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) { 
    var internidevent = event.value 
    var minusday = dayDelta 
    var minusminutes = minuteDelta 



    var whataction = 3 


    $.post('save.asp',{whataction:whataction,internidevent:internidevent,minusday:minusday,minusminutes:minusminutes}) 


    //if (allDay) { 
     // alert("Event is now all-day"); 
    //}else{ 
     // alert("Event has a time-of-day"); 
    //} 

    // if (!confirm("Are you sure about this change?")) { 
    // revertFunc(); 
    // } 

}, 

     dayClick: function(date, allDay, jsEvent, view) { 







    // change the day's background color just for fun 
    // $(this).css('background-color', 'red'); 

} 

})

感謝任何幫助！

最好的問候萊納斯

來源

2011-11-22 Linus

我有同樣的問題。從頁面加載這樣的日曆解決它，應該在同一個頁面上工作以及在$（document）.ready函數：

<script type="text/javascript"> 
    setTimeout("jQuery('#kalender1').fullCalendar('render');",100); 
</script>

真的不知道爲什麼發生這種情況，但修復（這是一種醜陋的雖然）爲我工作得很好。

來源

2011-11-24 08:44:54

正是我需要.. Thx的幫助！它現在工作正常！ – Linus

如果fullcalendar在隱藏div中初始化，那麼它將不會顯示。在這種情況下，您必須強制渲染方法。你可以在這裏找到更多細節。（http://arshaw.com/fullcalendar/docs/display/render/）

在選項卡的情況下：

$('#tabs').tabs({ 
    show: function(event, ui) { 
     $('#calendar').fullCalendar('render'); 
    } 
});

來源

2011-12-11 04:37:03

我哈德一個同樣的問題，但它是用jQuery模式。我在jquery模式彈出框中添加了fullcalendar。所以當它彈出顯示時，它沒有渲染fullcalendar。在閱讀完這個問題後，我試圖弄清楚它並且完美地解決它。這是解決方案：

$('#new_jb').click(
function(event, ui) { 
    $('#calendar').fullCalendar('render'); 

})

在上面的代碼#new_jb是彈出按鈕ID和#calendar是呈現日曆我的日曆ID。

希望這會幫助別人。 :-)

來源

2012-08-08 10:23:33 Rcreators

我意識到這是一個老問題，但如果您在jQuery的文檔ready（）處理函數中調用fullCalendar，通常會發生此問題。當ready事件觸發時，瀏覽器可能沒有完全呈現頁面，所以fullCalendar不知道它所加載的容器的寬度。

將您的fullCalendar調用放入一個window.onload（）事件處理函數中，直到瀏覽器完成加載頁面爲止，此時它將知道容器的正確大小。

$(window).load(function() { 
    $('#calendar').fullcalendar('render'); 
}

馬格努斯冬天的方法，通過渲染日曆，這給瀏覽器足夠的時間來處理頁面之前，暫停100毫秒做了類似的事情。

來源

2014-03-28 21:21:44 Hibiscus

Fullcalendar在第一次加載時的大小錯誤

回答

相關問題