突出顯示的藍色背景區域應該與全日曆中拖動外部事件的持續時間成比例

Question

我正在使用fullCalendar-2.9.1以及fullcalendar-scheduler-1.4.0。在我目前的項目中，我需要將外部元素拖放到完整的日曆中。將元素拖動到完整日曆中時，會顯示一個高亮顯示部分，顯示拖動元素懸停的選定部分。我已將defaultTimedEventDuration設置爲'00：30：00'，因此如果未指定結尾，則事件的默認持續時間應爲30分鐘。

我有事件，其持續時間爲10分鐘。我將這些fullcalender事件拖到外部元素框並再次將其拖回fullcalendar。我已經在數據中設置了事件的開始和結束時間（'事件'）。

現在我的問題是，當我將外部元素拖入fullcalendar時，突出顯示部分總是相當於30分鐘，因爲我猜的是defaultTimedEventDuration。我需要控制突出部分的高度，該部分應該與拖動元素的持續時間相匹配。

如何根據事件持續時間控制突出顯示部分的高度？

$('#external-events .fc-event').each(function() {   
      $(this).data('event', { 
       title: $.trim($(this).text()), 
       stick: true 
      });   
      $(this).draggable({ 
       zIndex: 999, 
       revert: true, 
       revertDuration: 0 
      }); 

     }); 
     function makeEventsDraggable() {     
       $('.fc-draggable').each(function() {         
        $(this).data('event', { 
         title: $.trim($(this).text()),       
         stick: true 
        }); 
        $(this).draggable({ 
         appendTo: ".calander_container",      
         helper: function(ev) { 
           return '<div id="draggableHelper" class="fc-event " style="width:'+$(this).parent().width()+'px; height:'+$(this).height()+'px;">'+ $(this).html() +'</div>'; 
         },       
         zIndex: 9999, 
         revert: true, 
         revertDuration: 0 
         }); 

       }); 

      } 
      var sDate = null; 
var resource_id = null; 
$('#calendar').fullCalendar({ 
      defaultView: 'agendaDay', 
      defaultDate: '2016-09-07', 
      editable: true, 
      selectable: true, 
      eventLimit: true, 
      droppable: true,    
      minTime: '07:00:00', 
      maxTime: '22:00:00', 
      slotDuration: '00:05:00', 
      scrollTime: sTime,    
      slotLabelInterval: {hours:1},  
      allDaySlot: false, 
      disableDragging: false, 
      selectable: false, 
      selectHelper: true, 
      defaultTimedEventDuration: '00:30:00', 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,agendaWeek,agendaDay' 
      }, 
      views: {     
      },   
      allDaySlot: false, 
      resources: [ 
       { id: 'a', title: 'Room A' }, 
       { id: 'b', title: 'Room B', eventColor: 'green' }, 
       { id: 'c', title: 'Room C', eventColor: 'orange' }, 
       { id: 'd', title: 'Room D', eventColor: 'red' } 
      ], 
      events: [ 
       { id: '1', resourceId: 'a', start: '2016-09-06', end: '2016-09-08', title: 'event 1' }, 
       { id: '2', resourceId: 'a', start: '2016-09-07T09:00:00', end: '2016-09-07T14:00:00', title: 'event 2' }, 
       { id: '3', resourceId: 'b', start: '2016-09-07T12:00:00', end: '2016-09-08T12:10:00', title: 'event 3' }, 
       { id: '4', resourceId: 'c', start: '2016-09-07T07:30:00', end: '2016-09-07T07:05:00', title: 'event 4' }, 
       { id: '5', resourceId: 'd', start: '2016-09-07T10:00:00', end: '2016-09-07T10:20:00', title: 'event 5' } 
      ], 
     viewRender: function(view, element) {  
       element.on('dblclick',function(e) {     
        var defaultDuration = moment.duration($('#calendar').fullCalendar('option', 'defaultTimedEventDuration')); 
        var eDate = slotDate.clone().add(defaultDuration);      
        $('#calendar').fullCalendar('select', slotDate, eDate, resource_id); 
       });  
     }, 
      select: function(start, end, jsEvent, view, resource) {    
      }, 
      dayClick: function(date, jsEvent, view, resource) { 
       sDate = date; 
       resource_id = resource.id;   
      }, 
      drop: function(date, jsEvent, ui, resourceId) { 
       var oEventObject = $(this).data('event'); 
       var duration = null; 
       if((oEventObject.start)&&(oEventObject.end)){ 
        duration = moment.duration(oEventObject.end.diff(oEventObject.start));      
       } 
       var cEventObject = $.extend({}, oEventObject);      
       cEventObject.start = date; 
       var defaultDuration = null; 
       if(duration) { 
       defaultDuration = duration; 
       } else { 
        defaultDuration = moment.duration($('#calendar').fullCalendar('option', 'defaultTimedEventDuration')); 
       } 
       cEventObject.end = date.clone().add(defaultDuration); 
       cEventObject.resourceId = resourceId; 
       $('#calendar').fullCalendar('renderEvent', cEventObject, true); 
       if ($('#drop-remove').is(':checked')) {     
        $(this).remove(); 
       } 
       makeEventsDraggable(); 
      }, 
      eventReceive: function(event) { 
       console.log('eventReceive', event); 
       makeEventsDraggable(); 
      }, 
      eventDrop: function(event) { 
       if(isEventOverDiv(jsEvent.clientX, jsEvent.clientY)) { 
        $('#calendar').fullCalendar('removeEvents', event._id); 
        var el = $("<div class='fc-event'>").appendTo('#external-events-listing').text(event.title); 
        el.data('event', { title: event.title, id: event._id, start: event.start, end: event.end, stick: true });     
        el.draggable({ 
         helper: function(event) { 
          return $(event.target).clone().css({ 
           width: $(event.target).width() 
          }); 
         }, 
         zIndex: 999,        
         revert: true,  
         revertDuration: 0 
        }); 
       } 
       makeEventsDraggable(); 
      } 
     }); 

Answer 1

得到答案。我們需要在el.data（'event'，{title：event.title，id：event._id，start：event.start，end：event.end，stick：true}）中包含持續時間。即，el.data（'event'，{title：event.title，id：event._id，start：event.start，end：event.end，duration：'00：10：00'，stick：true}）