数据转换后的完整日历删除事件对象

Question

我在使用完整日历时遇到了一个奇怪的问题。我正在尝试为不同类型的事件创建鼠标悬停，并且在"eventDataTransform"和"eventMouseover"函数之间事件对象的属性消失时遇到了一些问题

这适用于将从 API 加载数据以填充完整日历的 Web 应用程序。当我不对事件执行转换时，我能够获取对象的所有属性。我正在检查对象，并表明当对象被转换时它存在，而当它被鼠标悬停时则不存在。

calendar = $("#k_calendar").fullCalendar({
isRTL: KUtil.isRTL(),
header: {
left: "prev,next today",
center: "title",
right: "month"
},
editable: false,
eventLimit: false,
navLinks: true,
weekends: true,
eventSources: [
// Loaded from a previous source
data,
"{% url 'pentesting-api:pentest-events' %}"
],
displayEventTime: false,
// Where the error is
eventDataTransform: function (eventData) {
if (eventData.hasOwnProperty('vendor')) {
eventData.end = moment(eventData.end).add(1, 'days').format();
eventData.title = eventData.full_name;
eventData.backgroundColor = statusColors[eventData.status];
eventData.allDay = true;
return eventData;
}
else {
eventData.title = eventData.event_name;
eventData.backgroundColor = eventColors[eventData.event_type];
// all attributes are on the object here
console.log(eventData);
return eventData;
}
// Using the below commented out code works but doesn't distinguish between events 
// eventData.end = moment(eventData.end).add(1, 'days').format();
//   eventData.title = eventData.full_name;
//   eventData.backgroundColor = statusColors[eventData.status];
//   return eventData;
},
eventMouseover: function (event, jsEvent, view) {
closePopovers();
// console.log(event);
if (event.hasOwnProperty('event_type')) {
console.log('this mouse over');
// object dropped the 'end' attribute
console.log(event);
let start_base, end_base, start_date, end_date, start_time, end_time;
start_base = event.start.format().split('T');
start_date = start_base[0];
start_time = start_base[1].split('-')[0].split(':')[0] + ':' + start_base[1].split('-')[0].split(':')[1];
end_base = event.end.format().split('T');
end_date = end_base[0];
end_time = end_base[1].split('-')[0].split(':')[0] + ':' + end_base[1].split('-')[0].split(':')[1];
popoverElement = $(jsEvent.target);
$(jsEvent.target).popover({
title: event.event_name,
content: function () {
let content;
content = 'Event Type: ' + event.event_type +
'<br>Start: ' + start_date + ' ' + start_time +
'<br>End: ' + end_date + ' ' + end_time +
'<br>Resource: ' + event.resource;
return content
},
trigger: 'hover',
html: true
}).popover('show')
}
else {
var end = event.end.subtract(1, 'days').format().split('T')[0];
popoverElement = $(jsEvent.target);
$(jsEvent.target).popover({
title: event.title,
content: function () {
var content;
content = 'Pentest ID: ' + event.id +
'<br>Pentest Status:' + event.status +
'<br>Start Date: ' + event.start.format() +
'<br>End Date: ' + end +
'<br>Resources: ' + event.tester +
'<br>Duration: ' + event.duration;
return content
},
trigger: 'hover',
html: true
}).popover('show')
}
},
eventMouseout: function (event, jsEvent, view) {
$(jsEvent.target).popover('hide')
}
})});

我希望鼠标悬停的输入包括"结束"对象属性，但是，它不存在。当执行 if， else eventDataTransformation 时，所有对象属性都在那里，包括 'end' 属性。当数据事件记录在 eventMouseover 函数中时，除了"end"之外，每个属性都在那里。

事件数据转换对象(我想要的)

{
"id": 11,
"resource": "1",
"event_name": "Test Event",
"start": "2019-03-29T08:52:44.330075-07:00",
"end": "2019-03-29T08:52:44.330173-07:00",
"event_type": "Demo",
"pentest_id": null,
"title": "Test Event",
"backgroundColor": "#ADD8E6"
}

传递给 eventMouseover 函数的对象(相同的对象，但缺少"end"属性)

id: "_fc12"
allDay: false
backgroundColor: "#ADD8E6"
className: Array []
end: null
event_name: "Test Event"
event_type: "Demo"
id: 11
pentest_id: null
resource: "1"
source: Object { calendar: {…}, uid: "4", url: "/api/pentesting/events/", … }
start: Object { _isAMomentObject: true, _i: "2019-03-29T08:52:44.330075-07:00", _f: "YYYY-MM-DDTHH:mm:ss.SSSSZ", … }
title: "Test Event"
<prototype>: Object { … }
pentesting:1781:23

Answer 1

根据规范(在此错误报告中很好地记录了 - https://github.com/fullcalendar/fullcalendar/issues/3688)，结束日期必须与开始日期不同(否则结束日期将为"空"！

我也会小心在开始之前制作结束日期 - 在您的事件中鼠标悬停您正在减去一天 - 您可能应该进行快速检查以确保结束是>(不是 = 因为您将遇到"空"问题...... 我没有发现任何关于在开始之前结束的内容，但我很确定 fullCalendar 会"关闭"它(也可能带有空值，因为 end 是可选的)。