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')
  }
})});

我希望鼠标悬停时的输入包含'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

Answer 1

根据规范（在此错误报告中详细记录-https://github.com/fullcalendar/fullcalendar/issues/3688），结束日期必须不同于开始日期（否则结束日期将为“ null”！）

在开始之前，我也要谨慎确定结束日期-在eventMouseover中，您要减去一天-您应该进行快速检查，以确保结束日期>（不是=，因为您将获得'null '问题...）开始。在开始之前，我没有找到任何关于结束的信息，但是我很确定fullCalendar会“关闭”它（由于end是可选的，所以也可能为null）。

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

1 个答案: