フルカラーでの外部イベントのハイライト（灰色の背景）の防止方法

Question

外部イベントの開始時刻と終了時刻はすでにありますが、同じ外部イベントのハイライト（灰色の背景）に終了時刻を設定する正しい方法はありますか。

またはハイライトで終了時刻を設定する方法がない場合、外部/ドラッグ可能なイベントから完全にfc-highlightを削除できます。ところで

は、私はすでにこの質問をしたが、正しい応答を取得できませんでしたが、私は詳細について再び

を求めている理由ですので、ここで私の別の質問をご覧ください：Disable highlight of an external event in fullcalendar

Answer 1

完全なソリューションでは、これをチェックアウト：Fullcalendar External/Draggable Events Highlight Effect

フルカレンダーのドキュメントを読んでこの問題に多くの時間を費やした後、私は解決策を考え出し、他の人にも役立つことを願っています。

ので、解決策は次のとおりです。

• イベントには期間が設定されていない場合、私は、外付け/ドラッグ可能なイベントのデフォルト期間であるオプションdefaultTimedEventDurationを追加しました。

  e。g：defaultTimedEventDuration: '01:00:00'

• また、動的持続時間と強調表示された効果を得るためにhtmlのdata-durationが追加されました。

  例：<div class='fc-event' data-duration='03:00'>My Event 1</div>

NB：また、設定するduration属性をJS data

Answer 2

開始をyour CodePen ...
時間計算として定義された期間を持つために、ドラッグ可能なイベントをカスタマイズすることができました。

属性をdraggableイベントにdata-duration-hourとdata-duration-minuteの属性を追加しました。

これらの「データ」属性は、ドロップ時にイベントの終了時刻を決定するために使用されます。

NOW カレンダーで（drop前）dragで発生hightlightについて ...
は、それはまだ2時間をhightlights。

dragに追加する関数を見て、fullCalendarのオプションを調べる必要があります。
私は今は分かりません。だから、

...私は（ドラッグにhightlight効果について）右の質問に答えていない可能性があります。
これはまだあなたのプロジェクトの改善です。

参照は、このCodePen

HTMLに変更：

<div class='fc-event' data-duration-hour="3" data-duration-minute="30">My Event 1</div> 

JSを変更：

function external_event_dropped(date, external_event) { 

    var event_object; 
    var copied_event_object; 
    var tempDate = new Date(date); 

    event_object = $(external_event).data('eventObject'); 

    copied_event_object = $.extend({}, event_object); 
    copied_event_object.start = date; 

    // This is the dropped date object 
    console.log(date); 

    // This is the drop time in clear. 
    console.log("dropped at: "+date.hour()+":"+date.minute()); 


    // Retreive the data-duration from the dragged element. 
    var durationHour = parseInt(external_event.data("duration-hour")); 
    var durationMinute = parseInt(external_event.data("duration-minute")); 
    console.log("DATA: "+durationHour+":"+durationMinute); 


    // Clone the time object to modify it in order to create de end time. 
    var dateEnd = date.clone(); 

    dateEnd = dateEnd.hour(dateEnd.hour()+durationHour); 
    dateEnd = dateEnd.minute(dateEnd.minute()+durationMinute); 

    // This is the end time object. 
    console.log(dateEnd); 

    // This is the drop end time in clear. 
    console.log("dropped at: "+dateEnd.hour()+":"+dateEnd.minute()); 

    // Now set it to the FullCalendar object. 
    copied_event_object.end = dateEnd; 

    copied_event_object.allDay = false; 
    copied_event_object.title = 'ADEEL'; 

    external_event.remove(); 

    $('#exampleCalendar').fullCalendar('renderEvent', copied_event_object, true); 

}