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

Question

I already have start and end time for an external event but is there any correct way to set the end time on highlight (gray background) of the same external event.

Or if there is no way to set the end time on highlight then can we remove the fc-highlight completely from external/draggable events.

By the way, I already asked this question but didn't get correct response, so that's why I'm asking again

For more detail, please visit my another question here: Disable highlight of an external event in fullcalendar

Answer 1

Starting from your CodePen ...
I managed to customise the draggable event in order to have a defined duration to be used as time calculation.

I added data-duration-hour and data-duration-minute attributes to the draggable event.

Those "data" attributes ares used to determine the ending time of the event, on drop.

NOW about the hightlight which occurs on drag (before drop ) in the calendar...
It still hightlights 2 hours.

You'll have to to look at a function to add on drag in fullCalendar options.
I have no idea for the moment.

So ... I may not have answered the right question (about the hightlight effect on drag).
But this is still an improvement for your project.

See in this CodePen

HTML modified:

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

JS modified:

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

Well after reading the fullcalendar documentation and spent a lot of time on this issue, I come up with a solution and I hope it might help others as well.

So, the solution is:

• I've added an option defaultTimedEventDuration which is a default duration of an external/draggable event, if there is no duration set on event.

  eg: defaultTimedEventDuration: '01:00:00'

• Also added data-duration in html to get dynamic duration and highlighted effect.

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

NB: Also possibility to set duration attribute in js data