如何防止外部事件在fullcalendar中高亮顯示（灰色背景）

Question

我已經有外部事件的開始和結束時間，但有沒有正確的方法來設置同一外部事件的高亮顯示（灰色背景）上的結束時間。

或者如果沒有辦法突出顯示結束時間，那麼我們可以從外部/可拖動事件中完全刪除fc-highlight。

順便說一句，我已經問過這個問題，但沒有得到正確的響應，所以這就是爲什麼我又

詢問更多詳細信息，請點擊這裏查看我的另一個問題：Disable highlight of an external event in fullcalendar

Answer 1

對於完整的解決方案檢查了這一點：Fullcalendar External/Draggable Events Highlight Effect

在閱讀fullcalendar文檔並在這個問題上花了很多時間後，我想出了一個解決方案，我希望它也可以幫助其他人。

所以，解決的辦法是：

• 我增加了一個選項defaultTimedEventDuration這是一個外部/可拖動事件的默認持續時間，如果沒有時間的事件設置。

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

• 在html中還添加了data-duration以獲得動態持續時間和突出顯示效果。

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

注：也可能設置在duration JS屬性data

Answer 2

啓動從your CodePen ...
我設法自定義可拖動事件，以便將定義的持續時間用作時間計算。

我將data-duration-hour和data-duration-minute屬性添加到可拖動事件。

這些「數據」屬性用於確定事件的結束時間。

NOW約在日曆發生在drag的hightlight（drop前）...
它仍然hightlights 2小時。

您將不得不看看drag的功能fullCalendar選項。
我暫時還不知道。

所以 ......我可能沒有回答正確的問題（關於拖動的高光效果）。
但是，這仍然是你的項目的改進。

看到在這個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); 

}