Jquery 突出显示的蓝色背景区域应与fullcalendar中拖动外部事件的持续时间成比例

我正在使用fullCalendar-2.9.1和fullCalendar-scheduler-1.4.0。在我当前的项目中，我需要将外部元素拖放到完整的日历中。将元素拖动到完整日历中时，将显示一个突出显示部分，其中显示所拖动元素悬停的选定部分。我已将defaultTimedEventDuration设置为“00:30:00”，因此，如果未指定结束，则事件的默认持续时间应为30分钟

我有一些活动，持续时间为10分钟。我将这些fullcalendar事件拖到外部元素框，然后再次将其拖回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();
           }
       });

$（'#external events.fc event'）。每个（函数（）{
$（此）.data（'事件'{
标题：$.trim（$（this）.text（）），
棍子：是的
});         
$（此）。可拖动({
zIndex:999，
回复：对，
恢复持续时间：0
});
});
函数makeEventsDragable（）{
$（'.fc draggable'）。每个（函数（）{
$（此）.data（'事件'{
标题：$.trim（$（this）.text（）），
棍子：是的
});
$（此）。可拖动({
附录：“.calander_容器”，
助手：功能（ev）{
返回“”+$（this）.html（）+“”；
},                         
zIndex:9999，
回复：对，
恢复持续时间：0
});
});
}
var-sDate=null；
var-resource_id=null；
$（“#日历”）.fullCalendar({
defaultView:'agendaDay'，
违约日期：“2016-09-07”，
是的，
是的，
eventLimit：对，
真的，
minTime:'07:00:00'，
maxTime:'22:00:00'，
慢速持续时间：“00:05:00”，
滚动时间：时间，
slotLabelInterval:{hours:1}，
全天时段：错，
禁用拖动：false，
可选：false，
selectHelper:对，
defaultTimedEventDuration:'00:30:00'，
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，agendaWeek，agendaDay”
},
视图：{
},          
全天时段：错，
资源：[
{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'}
],
活动：[
{id:'1'，resourceId:'a'，开始：'2016-09-06'，结束：'2016-09-08'，标题：'event 1'}，
{id:'2'，resourceId:'a'，开始：'2016-09-07T09:00:00'，结束：'2016-09-07T14:00:00'，标题：'event 2'}，
{id:'3'，resourceId:'b'，开始：'2016-09-07T12:00:00'，结束：'2016-09-08T12:10:00'，标题：'event 3'}，
{id:'4'，resourceId:'c'，开始：'2016-09-07T07:30:00'，结束：'2016-09-07T07:05:00'，标题：'event 4'}，
{id:'5'，resourceId:'d'，开始：'2016-09-07T10:00:00'，结束：'2016-09-07T10:20:00'，标题：'event 5'}
],
viewRender:函数（视图，元素）{
on（'dblclick'，函数（e）{
var defaultDuration=moment.duration（$（'#calendar'）.fullCalendar（'option'，'defaultTimedEventDuration'））；
var eDate=slotDate.clone（）.add（defaultDuration）；
$（'#calendar'）.fullCalendar（'select'，slotDate，eDate，resource_id）；
});       
},
选择：函数（开始、结束、jsEvent、视图、资源）{
},
dayClick：函数（日期、jsEvent、视图、资源）{
sDate=日期；
resource_id=resource.id；
},
drop：函数（日期、jsEvent、ui、资源ID）{
var oEventObject=$（this）.data（'event'）；
var持续时间=空；
如果（（oEventObject.start）和&（oEventObject.end））{
持续时间=时刻持续时间（oEventObject.end.diff（oEventObject.start））；
}
var cEventObject=$.extend（{}，oeventbject）；
cEventObject.start=日期；
var defaultDuration=null；
如果（持续时间）{
defaultDuration=持续时间；
}否则{
defaultDuration=moment.duration（$（'#calendar'）.fullCalendar（'option'，'defaultTimedEventDuration'））；
}
cEventObject.end=date.clone（）.add（defaultDuration）；
cEventObject.resourceId=resourceId；
$（“#calendar”）.fullCalendar（'renderEvent'，cEventObject，true）；
如果（$（'#drop remove'）。是（':checked'））{