マウスオーバーで週末にまたがるハイライトイベント

Question

1日のイベント（1色で表示）と1週間のイベント（diff色で表示）の混合を表示するためにfullcalendarを設定しました。重複するイベントが混在すると混乱する可能性があるため、イベントの可視性を向上させたいので、マウスオーバー時にイベントが黄色の枠線で強調表示されるように設定しました。

これはすべて問題ありません。ただし、週末に渡ってイベントが発生した場合は例外です。水曜日に始まり、水曜日に終了します。マウスオーバーでは、イベントは現在の週のみハイライト表示されます。週末以降にイベントの一部がハイライト表示されません。

Answer 1

Ok、 私はこれを働かせました。

fullcalendar.jsは、各イベントのためのユニークなIDを生成 - > event._id（_fc1、_fc2 ...等）

各イベントは、アンカータグ（で表されます）。週末にまたがるイベントは2つのアンカータグで表されます。各イベントの一意のIDは、fullcalendar.jsによってhtmlに出力されないため、どのアンカーがどのイベントに関連付けられているかを見ることはできません。

私はこのイベントに関連付けられたすべてのアンカータグがあってもよいことを意味する（追加のCSSクラス名として）生成されるアンカーに各イベントのユニークなIDを付加fullcalendar.jsに小さな変化

を作っmouseoverイベントでJQueryクラスセレクタを使用して選択します。

eventMouseover: function (event, jsEvent, view) {    
     $("." + event._id).each(function (index) { 
      $(this).css('border-color', 'yellow'); 
     }); 
    }, 

私のために働きます！

Answer 2

は、より良い方法があるかもしれませんが、私はソースに触れないような方法が見つかりました：

1. は、イベントごとに独自のCSSクラスを追加します。
2. レンダリング時に、イベントが週末にまたがっても、そのクラスはすべてのセグメントに適用されます。
ユーザーがイベントをクリックする
3. ：

 

$("." + calEvent.className).addClass('red'); 

サイドノート：あなたが同じイベントに属するイベント、他のセグメントを、ドラッグすると、隠されているので、fullCalendarを認識しています他のセグメントは、私はAPIを介してアクセスする方法を見つけていない。