В FullCallendar я могу получить поведение, подобное droppable, без использования перетаскивания?

Полный календарь имеет возможность разрешить перетаскивание внешних jQuery UI draggables в календарь. Как вы можете видеть на этом demo (наиболее очевидное в представлении "неделя" ), когда вы перетаскиваете событие через временные интервалы, соответствующие временные интервалы подсвечиваются в зависимости от продолжительности события, которое будет создано. Выпадающие события также будут соответствовать любым ограничениям, которые указаны для них. Это означает, что при перетаскивании недействительных временных интервалов они не подсвечиваются, и падение не будет принято.

Возможно ли получить эти функции, не используя draggables? Я хотел бы разместить заранее заданное событие (название, продолжительность) в календаре, с автоматическим вычислением ограничений и визуальной обратной связью, описанной выше, но с простым mousover и щелчком.

Tobclarify Я хочу нажать на временной интервал, чтобы создать событие заданной продолжительности, начиная с выбранного временного интервала. Я хочу, чтобы событие создавалось только в том случае, если оно находится в пределах набора ограничений. Я также хочу визуально обмениваться указателем мыши, какой временной диапазон будет покрываться событием, если я нажму.

1 ответ

У меня есть решение, которое я считаю очень хаки. Пожалуйста, улучшите этот ответ.

Необходимые условия

Подход

Каждый раз, когда перетаскивание может быть прервано:

  • создать элемент со связанным событием,
  • сделать его перетаскиваемым,
  • имитировать событие mousedown.

Существует рабочая версия http://jsfiddle.net/u863kysr/2/

// My Predetermined Event
var potentialEvent = {
 duration: '1:30:00',
 title: 'Your Bookiing',
 constraint: 'businessHours',
};
// Create the FullCalendar
$cal = $('#cal').fullCalendar({
 defaultView: 'agendaWeek',
 businessHours: true,
 droppable: true,
 allDaySlot: false,
})
var $draggable = null;
// ******* definitely stops dragging.
$(document.body).on('*******', function () {
 if ($draggable) {
 $draggable.remove()
 }
 // Create a new element so that it positioned at {clientX: 0, clientY: 0}.
 $draggable = $('')
 .css('position', 'fixed')
 .css('top', 0)
 .css('left', 0)
 .insertBefore($cal);
 // Associate the event with the element in the way theat FullCalendar expects.
 $draggable
 .data('event', potentialEvent)
 .draggable();
 // After this event has finished, simulate a mousedown so that it acts like
 // it is being dragged.
 setTimeout(function () {
 $draggable.simulate('mousedown', {
 clientX: 0,
 clientY: 0
 });
 }, 0)
}).trigger('*******');

Ограничения

Он не обрабатывает прокрутку FullCalendar. Расположение перетаскивания смещается от мыши на величину прокрутки.

licensed under cc by-sa 3.0 with attribution.