为什么 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) returns 也得到了 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

好吧，我从 fullcalendar 网站上拿了这个例子，它起作用了：

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />


  <title>
    Add an event dynamically - Demos | FullCalendar
  </title>


<link href='/assets/demo-to-codepen.css' rel='stylesheet' />


  <style>

    html, body {
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
      font-size: 14px;
    }

    #calendar {
      max-width: 900px;
      margin: 40px auto;
    }

  </style>


<link href='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.css' rel='stylesheet' />


  <link href='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.css' rel='stylesheet' />


<script src='/assets/demo-to-codepen.js'></script>

<script src='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js'></script>




  <script src='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.js'></script>



  <script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'dayGrid' ],
      defaultView: 'dayGridMonth',
      header: {
        center: 'addEventButton'
      },
      customButtons: {
        addEventButton: {
          text: 'add event...',
          click: function() {
            var dateStr = prompt('Enter a date in YYYY-MM-DD format');
            var date = new Date(dateStr + 'T00:00:00'); // will be in local time

            if (!isNaN(date.valueOf())) { // valid?
              calendar.addEvent({
                title: 'dynamic event',
                start: date,
                allDay: true
              });
              alert('Great. Now, update your database...');
            } else {
              alert('Invalid date.');
            }
          }
        }
      }
    });

    calendar.render();
  });

</script>

</head>
<body>
  <div class='demo-topbar'>
  <button data-codepen class='codepen-button'>Edit in CodePen</button>




    Click the &quot;add event...&quot; button

</div>

  <div id='calendar'></div>
</body>

</html>

Answer 2

你的问题是 event1 是一个数组，而不是一个对象。 addEvent function 需要单个对象作为输入，而不是列表/数组。

将其更改为普通对象：

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

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

为什么 Fullcalendar 的 addEvent 不起作用

why addEvent from Fullcalendar does not work

javascript

fullcalendar

fullcalendar-4