Question

我迫切需要帮助，我不是JavaScript专家，我只是想将FullCalendar与弹出控件结合使用...

我可以在悬停时显示正确的日历，但是当我触发updateEvent来更新被单击的事件时，则弹出工具提示不再消失...？

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='lib/fullcalendar.min.css' rel='stylesheet' />
<link href='lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href='lib/scheduler.min.css' rel='stylesheet' />
<link href='lib/bootstrap.min.css' rel='stylesheet' />
<script src='lib/moment.min.js'></script>
<script src='lib/jquery.min.js'></script>
<script src='lib/fullcalendar.min.js'></script>
<script src='lib/scheduler.min.js'></script>
<script src='lib/popper.min.js'></script>
<script src='lib/bootstrap.min.js'></script>
<script>

  $(function() { // document ready

    $('#calendar').fullCalendar({
 header: { left: 'prev,next today', center: 'title' , right: 'timeline7Days,timeline30Days'}, 
 displayEventTime: false,titleRangeSeparator: ' - ',
 defaultDate: '2018-06-23',
 slotDuration: moment.duration(1, 'days'),slotLabelInterval: moment.duration(1, 'days'),
 views: { timeline30Days: { type: 'timeline', duration: { days: 30 }, buttonText:'30 days', slotWidth: 150  }, 
 timeline7Days: { type: 'timeline', duration: { days: 7 }, buttonText:'7 days', slotWidth: 50 }}, 
 defaultView: 'timeline7Days',
       eventRender: function(eventObj, $el) {
        $el.popover({
          title: eventObj.title,
          content: eventObj.title,
          trigger: 'hover',
          placement: 'top',
          container: 'body'
        });
      },
 resourceAreaWidth: "18%",
 resourceColumns: [{group: true,labelText: 'Crew',field: 'crew'},{labelText: 'Staff',field: 'staff'}],
 resources: [  
   { id: 'a',
     crew: 'Unallocated Tasks',
     type: 'header'
   },
  { id: '1',
     crew: 'Black Crew',
     staff: 'Mike',
     type: 'line'
   },
    { id: '2',
     crew: 'Black Crew',
     staff: 'John',
     type: 'line'
   },
  { id: '3',
     crew: 'Red Crew',
     staff: 'Paul',
     type: 'line'
   },
  { id: '4',
     crew: 'Red Crew',
     staff: 'Andre',
     type: 'line'
   },
  { id: '5',
     crew: 'Red Crew',
     staff: 'Mila',
     type: 'line'
   },
  { id: '6',
     crew: 'Yellow Crew',
     staff: 'Darren',
     type: 'line'
   } 
  ], 

  events: [ 
  { id: '10',resourceId: 'a',title: 'Unallocated Task 10',start: '2018-06-23T00:00:00',end: '2018-06-23T00:00:00',color: '#FF0000',originalcolor: '#FF0000',borderColor: '#000000',tip: 'You can add a description for the unallocated task here',tiptitle: 'This is the title of the Qtip',originalstart: '2018-06-23T00:00:00',originalend: '2018-06-23T00:00:00',editable: true,type: '' },{ id: '100',resourceId: 'a',title: 'Unallocated Task 100',start: '2018-06-24T00:00:00',end: '2018-06-24T00:00:00',color: '#FF0000',originalcolor: '#FF0000',borderColor: '#000000',tip: 'You can add a description for the unallocated task here',tiptitle: 'This is the title of the Qtip',originalstart: '2018-06-24T00:00:00',originalend: '2018-06-24T00:00:00',editable: true,type: '' },
  { id: '11',resourceId: 'a',title: 'Unallocated Task 11',start: '2018-06-25T00:00:00',end: '2018-06-25T00:00:00',color: '#FF0000',originalcolor: '#FF0000',borderColor: '#000000',tip: 'You can add a description for the unallocated task here',tiptitle: 'This is the title of the Qtip',originalstart: '2018-06-25T00:00:00',originalend: '2018-06-25T00:00:00',editable: true,type: '' },{ id: '12',resourceId: 'a',title: 'Unallocated Task 12',start: '2018-06-26T00:00:00',end: '2018-06-26T00:00:00',color: '#FF0000',originalcolor: '#FF0000',borderColor: '#000000',tip: 'You can add a description for the unallocated task here',tiptitle: 'This is the title of the Qtip',originalstart: '2018-06-26T00:00:00',originalend: '2018-06-26T00:00:00',editable: true,type: '' }  
  ],
 resourceRender: function(resource, cellEls) { cellEls.on('click', function() { $$.Event.Message('resourceClick','<resource><id>' + resource.id + '</id><type>' + resource.type + '</type></resource>', '')}); }, 

 eventClick: function(event, jsEvent, view) 
 {
    var events = new Array();
    var eventfiltervar = event.id;

    events = $('#calendar').fullCalendar('clientEvents', eventfiltervar);

    var eventfound = events[0];             
    eventfound.color = 'yellow';
    $('#calendar').fullCalendar('updateEvent', eventfound);
 },



 allDay: true,
 editable: true, 
 eventDrop: function(event, delta, revertFunc, view) { alert('<selection><id>' + event.id + '</id><start>' + event.start.format() + '</start></selection>')},
 windowResize: function(view) { $('#calendar').fullCalendar('rerenderEvents') },
 schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives'
    });  
  });

</script>
<style>
  body { font-family: Segoe UI; font-size: 14px; }

  .fc-content { cursor: pointer; }

  .fc-title { white-space: normal; }

  .out-of-range { opacity: .4; background: repeating-linear-gradient(-45deg,#606dbc,#606dbc 10px,#465298 10px,#465298 20px); }  
</style>
</head>
<body>
  <div id='calendar'></div>
</body>
</html>

FullCalendar与Popover和eventupdate

0 个答案: