0

「selectedItem」タブが fullcalendar を含むタブでない場合、jqxtab で fullcalendar がレンダリングされないという問題があります。カレンダーがタブ 0 にあり、selectedItem がタブ 1 に設定されているとしましょう。ご想像のとおり、ページが読み込まれると、2 番目のタブが選択されます。次に最初のタブ (fullcalendar を含む) をクリックすると、表示されるのは fullcalendar の "Today < >" ヘッダー ボタンだけです。これらのボタンの 1 つをクリックすると、残りのフルカレンダーがレンダリングされます。

ページの読み込み時にタブ 0 が選択されている場合、期待どおりに fullcalendar がすぐに描画されます。

以下のコード:

$(document).ready(function () {
        //Creating jqxTabs

        $('#jqxTabs').jqxTabs({ selectedItem: 1, width: '100%' });
        $('#calendar').fullCalendar({
            // put your options and callbacks here
        })


});

<div id='jqxTabs'>
<ul>
            <li>Tab 1</li>
            <li>Tab 2</li>
</ul>
<div style="width: 100%; height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px;"><div id='calendar'></div></div>
<div style="width: 100%; height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px;">Tab 2</div>

</div>

そのため、タブがクリックされたときにレンダリング関数を呼び出すという修正を見つけましたが、jqxtabs でフェードが有効になっていると機能しません。

$('#jqxTabs').on('selected', function (event) { 
    $('#calendar').fullCalendar('render');
});
4

1 に答える 1

0

Fullcalendar は、表示されている場合にのみレンダリングできます。あなたが見つけた修正は、タブクリックイベントが発生したときに表示されないため、フェードでは機能しません。

簡単な修正は、タイムアウトを使用することです。実際の遅延なしで動作するようにさえ見えます (他のコードが終了した後に実行されるだけです):

$('#jqxTabs').on('tabclick', function (event) {
    window.setTimeout(
        function(){
            $('#fc2').fullCalendar('render');
        });
});
于 2015-02-13T21:34:10.717 に答える