Fullcalendarの最初の読み込み時に間違ったサイズ

Question

ブラウザを開くたびにfullcalendarの最初の読み込みに問題があります。 ページを更新すると、すべて正常に動作します。

サイズが間違っています。フレームのサイズではなく、内容です。

これは、それがどのように見えるかです：

私は、ドキュメントを読んだが、私はこのことについて何かを見つけることができません。

は、ここに私の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'); 

} 

}) 

を！

最高のリナックス

Answer 1

私は同じ問題がありました。 $（ドキュメント）.ready関数内だけでなく、同じページで作業する必要があり、ページの読み込みからカレンダーをこれを行うことによってそれを解決：なぜこの問題が発生したが、修正（それはようなものだ

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

本当にわかりません醜いの）私のためにうまく動作します。

Answer 2

フルカレンダーを非表示のdivで初期化すると、表示されません。この場合、レンダリングメソッドを強制する必要があります。詳細はこちらをご覧ください。タブの場合 （http://arshaw.com/fullcalendar/docs/display/render/）

：

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

Answer 3

私は同じ問題をhadeが、それはjqueryのモーダルとありました。 jqueryモーダルポップアップボックスにfullcalendarを追加しました。ポップアップが表示されたときに、そのフルカラーレンダリングがレンダリングされませんでした。この質問を読んだ後、私はそれを理解してそれを完全に解決しようとします。上記のコード#new_jbで

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

}) 

ポップアップや#calendarためのボタンIDがカレンダーをレンダリングするカレンダーのIDです。これは、ソリューションです。

これは誰かを助けることを願っています。 :-)

Answer 4

これは古い質問ですが、この問題は通常、jQueryのdocument ready（）ハンドラでfullCalendarを呼び出す場合に発生します。準備完了イベントが発生すると、ブラウザーは完全にページをレンダリングしていない可能性があります。そのため、fullCalendarは読み込んでいるコンテナの幅を認識しません。

代わりにwindow.onload（）イベントハンドラにfullCalendar呼び出しを入れてください。ブラウザがページの読み込みを完了するまで、カレンダーは表示されません。その時点で、コンテナの正しいサイズがわかります。

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

マグヌス冬の方法は、ブラウザにページを処理するのに十分な時間を与えるカレンダーを、レンダリングの前に100ミリ秒間休止することにより、同様のことを行います。