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

Question

我已经有了外部事件的开始和结束时间，但是有没有正确的方法来设置同一外部事件突出显示（灰色背景）的结束时间。

或者如果无法设置突出显示的结束时间，那么我们能否从 external/draggable 事件中完全删除 fc-highlight。

顺便问一下，我已经问过这个问题，但没有得到正确的答复，所以我再问一次

有关更多详细信息，请访问我的另一个问题：

Answer 1

从your CodePen开始...
我设法自定义了可拖动事件，以便将定义的持续时间用作时间计算。

我向可拖动事件添加了 data-duration-hour 和 data-duration-minute 属性。

这些 "data" 属性用于确定事件的结束时间。

现在关于日历中 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

For the complete solution check this out: Fullcalendar External/Draggable Events Highlight Effect

在阅读了 fullcalendar 文档并在这个问题上花了很多时间之后，我想出了一个解决方案，希望它也能对其他人有所帮助。

所以，解决方案是：

我添加了一个选项 defaultTimedEventDuration，它是 external/draggable 事件的默认持续时间，如果事件没有设置持续时间的话。

例如：defaultTimedEventDuration: '01:00:00'
还在html中添加了data-duration以获得动态持续时间和高亮效果。

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

N.B: 也可以在 js data

中设置 duration 属性

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

How to prevent highlight (gray background) of an external event in fullcalendar

javascript

jquery

fullcalendar

fullcalendar-2