0

jqwidgetsに基づいてタブ内にフルカレンダーを配置しました。

選択したタブをクリックすると、ボタンの一番上の行が表示されますが、カレンダー自体は表示されません。一番上の行のボタンの1つをクリックすると、カレンダーが表示されます。

標準のui.tabsコンポーネントを使用してこれを行う方法について、他の投稿を読んで試しましたが、機能しません。これが私が持っているものです：

<script type="text/javascript">
    jQuery(document).ready(function () {
        var theme = '';
        // Create jqxTabs.
        jQuery('#classInfo').jqxTabs({ 
            width: "100%", 
            height: "1000px", 
            autoHeight: false, 
            position: 'top', 
            theme: theme, 
            show: function(event, ui) {
                jQuery('#classcalendar').fullCalendar('render');
                }
        });
        jQuery('#settings div').css('margin-top', '10px');
    });
</script>

ありがとう

4

3 に答える 3

2

デフォルトでは、FullCalendar は非表示の要素内ではレンダリングされません。また、ショー イベント バインダーはjqxTabs には適用されません。jQuery UI タブにのみ適用されます。

代わりに、選択したイベント バインダーを試してください。

$('#classInfo').bind('selected', function (event) { 
  if(event.args.item=="3") {
    jQuery('#classcalendar').fullCalendar('render');
  }
});

3カレンダーを保持するタブのインデックスは次のとおりです。あなたのケースに当てはまる任意の条件をここに入れることができます。

于 2012-07-03T04:33:29.663 に答える
0

非表示のタブ内にコンテナを配置してみてください。

<div id='calendar-container'></div>

次に、カレンダーの init HTML を、タブの外側のように見える場所に配置します。

<div id='calendar'></div>

カレンダーは、標準の fullCalendar() JS を使用してタブの外側に表示されます。

$("#calendar").fullCalendar();

次のステップは、jQuery .appendTo() 関数を使用して、コンテナー内の非表示のタブにカレンダーを移動することです。これがすべてまとめられたJSです。それが役立つことを願っています。

$("#calendar").fullCalendar().appendTo("#calendar-container");
于 2015-04-27T04:52:59.320 に答える
0

これを試して：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $('#calendar').fullCalendar('render');
})
于 2017-09-22T19:59:12.757 に答える