如何在全日歷中防止外部事件的突出顯示（灰色背景）

Question

我已經有了外部事件的開始時間和結束時間，但是有什么正確的方法可以在同一外部事件的突出顯示（灰色背景）上設置結束時間。

或者，如果無法設置高光顯示的結束時間，那么我們可以完全從外部/可拖動事件中刪除fc-highlight嗎？

順便說一句，我已經問了這個問題，但是沒有得到正確的答復，所以這就是為什么我再次問

有關更多詳細信息，請在此處訪問我的另一個問題： 在全日歷中禁用外部事件的突出顯示

Answer 1

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

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

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

現在，關於日歷中drag （在drop之前）發生的突出顯示...
仍然要亮2個小時。

您必須查看在fullCalendar選項中添加drag的函數。
我暫時不知道。

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

參見此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);

}

Answer 2

要獲取完整的解決方案，請查看以下內容： 完整的日歷外部/可拖動事件突出顯示效果

在閱讀了完整的日歷文檔並在此問題上花了很多時間之后，我想出了一個解決方案，希望它也能對其他人有所幫助。

因此，解決方案是：

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

  例如： defaultTimedEventDuration: '01:00:00'

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

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

注意：還可以在js data設置duration屬性