我对完整的日历有一个奇怪的问题。我正在尝试为不同类型的事件创建鼠标悬停,并且在“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')
}
})});
我期待来自鼠标悬停的输入包括'end'对象属性,但是,它不存在。在执行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
根据规范(在本bug报告中很好地记录 - https://github.com/fullcalendar/fullcalendar/issues/3688),结束日期必须与开始日期不同(或结束日期为'null'!)
我还要小心在开始之前制作结束日期 - 在你的eventMouseover中你减去一天 - 你应该快速检查以确保结束>(不是=因为你将有'空'问题。 ..) 开始。我在开始之前没有找到任何关于结束的东西,但是我很确定fullCalendar会“解雇”它(可能还有一个null,因为end是可选的)。