fullcalendar.io 5: addEventSource 不能通过外部函数工作

Question

对于一个小项目，我想在运行时添加事件。

实际日历是使用数据库中的数据创建的。单独的脚本创建额外的事件，这些事件是在日历运行时动态创建的。之后应将这些事件添加到现有日历中。

为了测试，我有一个日历和一个外部按钮。如果单击该按钮，应将一个事件添加到日历中。日历已创建并且点击被识别。但是没有添加事件。

思想错误在哪里？

HTML

<button class="holiday">Add Feiertage</button>
<div id='calendar'></div>

代码：

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

  var calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek'
    },
    initialDate: '2020-11-12',
    businessHours: true, // display business hours
    editable: true,
    events: [
      {
        title: 'Business Lunch',
        start: '2020-11-03T13:00:00',
        constraint: 'businessHours'
      },
      {
        title: 'Meeting',
        start: '2020-11-13T11:00:00',
        constraint: 'availableForMeeting', // defined below
        color: '#257e4a'
      },
      {
        title: 'Conference',
        start: '2020-11-18',
        end: '2020-11-20'
      },
      {
        title: 'Party',
        start: '2020-11-29T20:00:00'
      },

      // areas where "Meeting" must be dropped
      {
        groupId: 'availableForMeeting',
        start: '2020-11-11T10:00:00',
        end: '2020-11-11T16:00:00',
        display: 'background'
      },
      {
        groupId: 'availableForMeeting',
        start: '2020-11-13T10:00:00',
        end: '2020-11-13T16:00:00',
        display: 'background'
      },

      // red areas where no events can be dropped
      {
        start: '2020-11-18',
        title: 'Test-Holiday',
        overlap: false,
        display: 'background',
        color: '#ff9f89'
      }
    ]
  });

  calendar.render();
});

// external events by Click
jQuery(document).ready(function($) {
   $('.holiday').on('click', function() {
   console.log('klick');

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

    //var src = calendar.getEventSources(); // give me a empty array

    calendar.addEventSource(
      {
        events: [ // put the array in the `events` property
          {
            title  : 'Test-Event',
            start  : '2020-11-11',
            overlap: false,
            display: 'background',
            color: '#ff9f89'
          }
        ]
      });
    calendar.refetchEvents();
  });
 });
});

这是我的测试： https://jsfiddle.net/LukasHH/tu14xfwr/

Answer 1

您为 calendar.addEventSource 使用的 calendar 变量指的是与页面上显示的实例不同的 FullCalendar 实例。您已经创建了一个全新的日历 - 但没有将其呈现到页面上。这就是为什么您不会收到错误，但也没有任何有用的事情发生。

原来的 calendar 是在您的 document.addEventListener('DOMContentLoaded', function() { 块中定义和填充的，但您试图在 jQuery(document).ready(function($) { 块中创建一个新的。您需要使用对 calendar 的现有引用 - 但当然，当您需要它时它超出了范围，因为您在不同的代码块中。

现在，document.addEventListener('DOMContentLoaded', function() {和jQuery(document).ready(function($) {本质上是等价的，只是一个是原生JS写的，一个是jQuery语法。它们基本上执行相同的任务 - 即延迟执行代码，直到 DOM 完全加载。因此，将它们同时放在页面中没有多大意义或增加任何价值。只需使用一个块来包含您的所有代码，那么无论如何您都不会遇到任何范围问题。

除此之外，出于类似的原因，在jQuery“就绪”块中再添加一个document.addEventListener('DOMContentLoaded', function() {也是没有意义的！你根本不需要它。我只能假设您不理解该代码的作用，并认为它是 fullCalendar 的一部分——其实不是。

和

var i = calendar.initialEvents(); console.log(i);

没有意义。 fullCalendar 中没有名为 initialEvents 的方法，而且您似乎也没有尝试将 i 用于任何事情，因此您可以删除这些行。

例如

jQuery(document).ready(function($) { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { //...etc }); calendar.render(); $('.holiday').on('click', function() { calendar.addEventSource({ events: [ // put the array in the `events` property { title: 'Test-Event', start: '2020-11-11', overlap: false, display: 'background', color: '#ff9f89' } ] }); });

演示：https://jsfiddle.net/32w4kLvg/

fullcalendar.io 5: addEventSource 不能通过外部函数工作

fullcalendar.io 5: addEventSource not work from external function

javascript

jquery

fullcalendar

fullcalendar-5