У меня уже есть время начала и окончания для внешнего события, но есть ли правильный способ установить время окончания для выделения (серый фон) того же внешнего события.

Или, если нет способа установить время окончания на выделении, мы можем полностью удалить fc-highlight из внешних / перетаскиваемых событий.

Кстати, я уже задавал этот вопрос, но не получил правильный ответ, поэтому я спрашиваю снова

Для более подробной информации, пожалуйста, посетите мой другой вопрос здесь: Отключить выделение внешнего событие в полном календаре

1
Adeel 24 Апр 2017 в 18:33

2 ответа

Лучший ответ

Для полного решения проверьте это: Fullcalendar Выделение внешних / перетаскиваемых событий Эффект

Хорошо прочитав документацию fullcalendar и потратив много времени на эту проблему, я придумала решение и надеюсь, что оно может помочь и другим.

Итак, решение:

  • Я добавил опцию defaultTimedEventDuration, которая является продолжительностью по умолчанию для внешнего / перетаскиваемого события, если для события не задана продолжительность.

    например: defaultTimedEventDuration: '01:00:00'

  • Также добавлен data-duration в html для получения динамической продолжительности и выделенного эффекта.

    например: <div class='fc-event' data-duration='03:00'>My Event 1</div>

Примечание: также можно установить атрибут duration в js data

1
Adeel 25 Апр 2017 в 04:43

Начиная с вашего CodePen ...
Мне удалось настроить перетаскиваемое событие, чтобы иметь определенную продолжительность, которая будет использоваться в качестве расчета времени.

Я добавил атрибуты data-duration-hour и data-duration-minute в перетаскиваемое событие.

Эти атрибуты «data» используются для определения времени окончания события при выпадении.

СЕЙЧАС о выделении, которое происходит drag (до drop) в календаре ...
Это все еще выдвигает на первый план 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);

}
1
Louys Patrice Bessette 25 Апр 2017 в 00:12