javascript - 为什么 Fullcalendar 的 addEvent 不起作用

Question

嗨，我正在关注 https://fullcalendar.io/ v4 构建我的 js 日历。我尝试通过单击日历来创建一个新事件，然后调用函数 addEvent。我在哪里以及如何调用函数 addEvent 你能举个例子吗？我对删除事件有同样的问题。这就是我所做的，对于每次点击我添加一个事件，只是为了看看它是否有效。它不起作用。

var event1 = [
    {
      title: 'MyEvent',
      start: '2020-03-03T13:00:00',
      end:'2020-03-03T14:00:00'
    },
]

var calendar = new FullCalendar.Calendar(calendarEl, {
    eventClick: function (info) {
        calendar.addEvent( event1)
    },
    plugins: ["interaction", "timeGrid"],
    header: {
      left: "prev,next today",
      center: "title",
      right: "dayGridMonth,timeGridWeek,timeGridDay,listMonth",
    },
    defaultDate: currentDate,
    navLinks: true, 
    businessHours: {
      startTime: "08:00",
      endTime: "18:00", 
    },
    editable: true,
    weekends: false,

    allDaySlot: false,
      locale: "en",
    events: 
    [
        {
          title: 'MyEvent',
          start: '2020-03-03T13:00:00',
          end:'2020-03-03T14:00:00'
        },
    ]
  });
  calendar.render();

我查看了 main.js 中的函数 addEvent，看起来 id 什么也没做，元组得到了 nul 并且函数 (addEvent) 也返回了 nul!

Calendar.prototype.addEvent = function (eventInput, sourceInput) {
    if (eventInput instanceof EventApi) {
        var def = eventInput._def;
        var instance = eventInput._instance;
        // not already present? don't want to add an old snapshot
        if (!this.state.eventStore.defs[def.defId]) {
            this.dispatch({
                type: 'ADD_EVENTS',
                eventStore: eventTupleToStore({ def: def, instance: instance }) // TODO: better util for two args?
            });
        }
        return eventInput;
    }
    var sourceId;
    if (sourceInput instanceof EventSourceApi) {
        sourceId = sourceInput.internalEventSource.sourceId;
    }
    else if (sourceInput != null) {
        var sourceApi = this.getEventSourceById(sourceInput); // TODO: use an internal function
        if (!sourceApi) {
            console.warn('Could not find an event source with ID "' + sourceInput + '"'); // TODO: test
            return null;
        }
        else {
            sourceId = sourceApi.internalEventSource.sourceId;
        }
    }
    var tuple = parseEvent(eventInput, sourceId, this);
    if (tuple) {
        this.dispatch({
            type: 'ADD_EVENTS',
            eventStore: eventTupleToStore(tuple)
        });
        return new EventApi(this, tuple.def, tuple.def.recurringDef ? null : tuple.instance);
    }
    return null;
};

您有关于如何使用 addEvent 函数的示例吗

Answer 1

这里的问题是 event1 是一个数组，而不是一个对象。 addEvent function期望单个对象作为输入，而不是列表/数组。

将其更改为普通对象:

var event1 =
{
  title: 'MyEvent',
  start: '2020-03-03T13:00:00',
  end:'2020-03-03T14:00:00'
}

(没有将对象包装在数组中的 [ 和 ])，您的原始代码应该可以正常工作。