2016-07-08 5 views
0

同じタイムスロットで同時イベントを垂直分割するFullCalendarの動作をオーバーライドしたいと考えています。FullCalendarイベントを同じタイムスロット内の他のイベントの後ろに表示する方法はありますか?

Googleカレンダー(「タイムブロッキングテンプレート」と呼ばれています)は、他の(「タイムブロッキング」ではない)カレンダーイベントに関係なく、すべてのイベントがタイムスロット幅の100%を占めるようにしたいタイムスロット。他のGoogleカレンダーからの他のイベントは、通常どおり処理されます(また、他の非タイムブロッキングイベントと同じタイムスロットを共有する場合は垂直に分割されます)。

また、非タイムブロッキングイベントでは不透明パラメータが必要なので、その後ろにある「タイムブロッキングテンプレート」イベントを見ることができます。

これは可能ですか?

+0

次のような表示が必要です。 http://i.imgur.com/Guk8jVu.png –

答えて

1

ここで私はFullCalendarのeventAfterRender機能でどのようにしたのですか?

"タイムブロッキング"カレンダーに属するイベントに対しては、isTemplate = "true"を設定して、特定のイベントの幅をオーバーロードしました。

eventAfterRender機能を使用して、event.isTemplate == "true"をチェックして、それに応じて幅を&に設定しました。 event.isTemplate == "false"の場合は、不透明度を変更してテンプレートイベントが表示されるようにし、z-indexを1増やして、すべての「テンプレート以外の」イベントを「テンプレートイベント」の前に表示します。

eventAfterRender: function(event, element, view) { 
    if(event.isTemplate == "true") { 
     $(element).css('width','100%'); 
     $(element).css('left','0%'); 
    } else { 
     $(element).css('opacity','0.5'); 

     event_zindex = $(element).css('z-index'); 
     $(element).css('z-index',event_zindex + 1); 
    } 

希望、これは他の誰かに役立ちます。

次のブロックでは、私の$('#calendar').fullCalendar()宣言の中にあります!

関連する問題