2017-01-24 29 views
2

fullcalendar.ioを使用してカレンダーを作成し、それに問題があります。 コンテナのサイズが500pxより小さくなった場合、さまざまなオプションを使用してカレンダーをリロードする必要があります。イベントは少し違って見えるはずで、イベントのクリックは異なるようにすべきです。そこで、2つの異なるオプションセットを作成し、カレンダーがどちらか一方のセットを使用するかどうかをwindowResizeオプションで確認しました。破壊我々が使用する再初期化を強制するには、次のウィンドウ上のfullcalendarオプションを無効にしてサイズ変更する

windowResize: function(view) { 
    if(self.containerIsLarge()) { 
     self.$container.fullCalendar('destroy'); 
     self.createLargeCalendar(); 
     return; 
    } 
}, 

は、残念ながら我々は(我々は互換性のないバージョンがある環境で働く私たちは本当にスマートな方法で解決することができないこと、そして、他のいくつかの問題を取得しますmoment.jsので、カレンダーを破棄した後、互換性のないmoment.jsで初期化され、実際にはまったく動作しません...)。

以前にオプションを完全に切り替えてカレンダーを破棄せずに再読み込みする方法はありますか?私はon/off機能とオプション設定機能について知っていますが、正しく機能するようにはなりませんでした。これは正しい方法ですか、何かが恋しいのですか?

ありがとうございます! よろしくです マヌエル

答えて

2

さて、数時間の研究の後、私は実用的な解決策を見つけました。

1)コンテナのサイズによって異なり、すべてのイベントコールバックを削除する(これは)私が探していた「破棄」に代わるものです:

var calendar = self.$container.fullCalendar('getCalendar'); 
calendar.off('viewRender'); 
calendar.off('eventRender'); 
calendar.off('eventAfterAllRender'); 
calendar.off('eventClick'); 
calendar.off('eventLimitClick'); 
calendar.off('eventLimitText'); 

2)今、必要なすべてのイベントコールバックとオプションを設定します。

self.$container.fullCalendar('option', 'eventLimit', true); 
calendar.on('viewRender', function (view, element) { 
... 
}); 
calendar.on('eventRender', function (event, element, view) { 
... 
}); 
calendar.on('eventLimitClick', function (cellInfo, jsEvent) { 
... 
}); 
... 

3)トリガイベント、したがって、新しいコールバック関数を実行します。

self.$container.fullCalendar('refetchEvents'); 
self.$container.fullCalendar('getView').triggerRender(); 

よろしく マヌエル

+0

あなたは答えを受け入れるかもしれません:) – ppasler

関連する問題