javascript - 无法在 Fullcalendar 中获取 "id"值

Question

当我点击约会时，我没有获得值。我总是收到“未定义”

我有这个codepen https://codepen.io/egameiro/pen/Rwbgemx您可以在其中查看结果。

有人可以告诉我我做错了什么吗..？非常感谢。

请参阅下面我的代码。

var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: ['interaction', 'dayGrid', 'timeGrid'],
  defaultView: 'dayGridMonth',

  locale: 'pt-br',
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  navLinks: true, // can click day/week names to navigate views
  selectable: true,
  selectHelper: true,
  //selectMirror: true,
  editable: true,
  eventLimit: true, // allow "more" link when too many events

  //events: event1,
  events: [{
    id: '10',
    title: 'Meeting',
    start: '2019-08-01T10:30:00',
    end: '2019-08-01T12:30:00'
  }],

  eventClick: function (event) {
    alert(event.id);
    alert(event.title);
    alert(event.start.format('DD/MM/YYYY HH:mm:ss'));
    return false;
  },



});

calendar.render();

Answer 1

根据 documentation for eventClick回调提供的对象不仅仅是事件数据本身的副本。这是一个更复杂的物体，事件只是其中的一个子属性。文档说:

eventClickInfo is a plain object with the following properties:

• event The associated Event Object.

• el The HTML element for this event.

• jsEvent The native JavaScript event with low-level information such as click coordinates.

• view The current View Object.

因此，事件的数据(例如 id、title 等)将是该 event 子属性中的属性，而不是主属性的直接子属性对象。

一旦您阅读了该内容并正确理解了对象的结构，修复就很简单了:

eventClick: function (info) {
    alert(info.event.id);
    alert(info.event.title);
    alert(info.event.start.format('DD/MM/YYYY HH:mm:ss'));
    return false;
  },

更新的CodePen:https://codepen.io/ADyson82/pen/XWraJQx

附注这里仍然会遇到第二个问题，因为 info.event.start 是原生 JS Date 对象，而不是 momentJS 对象。因此它没有任何名为“format()”的函数。也许您更熟悉使用 momentJS 的 fullCalendar 版本 3？我将让您决定如何处理这个具体细节，因为它与您原来的问题没有直接关系。