无法在 Fullcalendar 中获取 "id" 值

Question

当我点击约会时，我没有得到值。我总是收到 "Undefined"

我有这个代码笔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

P.S。这里你仍然会有一个次要问题，因为 info.event.start 是一个原生的 JS Date 对象，而不是 momentJS 对象。因此它没有任何名为 "format()" 的函数。也许您更熟悉使用 momentJS 的 fullCalendar 版本 3？我将留给您决定如何处理这个具体细节，因为它与您的原始问题没有直接关系。

无法在 Fullcalendar 中获取 "id" 值

Not able to get the "id" value in Fullcalendar

javascript

fullcalendar

fullcalendar-4