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

问题描述 投票:1回答:1

我对完整的日历有一个奇怪的问题。我正在尝试为不同类型的事件创建鼠标悬停,并且在“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

javascript fullcalendar
1个回答
0
投票

根据规范(在本bug报告中很好地记录 - https://github.com/fullcalendar/fullcalendar/issues/3688),结束日期必须与开始日期不同(或结束日期为'null'!)

我还要小心在开始之前制作结束日期 - 在你的eventMouseover中你减去一天 - 你应该快速检查以确保结束>(不是=因为你将有'空'问题。 ..) 开始。我在开始之前没有找到任何关于结束的东西,但是我很确定fullCalendar会“解雇”它(可能还有一个null,因为end是可选的)。

© www.soinside.com 2019 - 2024. All rights reserved.