fullcalendar.io 5：addEventSource 无法通过外部函数工作

Question

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

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

为了进行测试，我有一个日历和一个外部按钮。如果单击该按钮，则会将事件添加到日历中。创建日历并识别单击。但没有添加任何事件。

思想错误在哪里？

超文本标记语言

<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();

});

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

Answer 1

calendar您使用的变量引用的是calendar.addEventSource与页面上显示的不同的 FullCalendar 实例。您创建了一个全新的日历 - 但随后没有将其呈现到页面上。这就是为什么你不会收到错误，但也没有发生任何有用的事情。原始块calendar已在您的块内定义并填充document.addEventListener('DOMContentLoaded', function() {，但您尝试在块内创建一个新块jQuery(document).ready(function($) {。您需要使用现有的引用calendar- 但当然，当您需要它时它超出了范围，因为您位于不同的代码块中。现在，document.addEventListener('DOMContentLoaded', function() {和jQuery(document).ready(function($) {本质上是等价的，只是一个是用原生JS编写的，一个是jQuery语法。它们基本上执行相同的任务 - 即延迟代码的执行，直到 DOM 完全加载。因此，将它们同时放在页面中没有多大意义或增加任何价值。只需使用一个块来包含所有代码，然后您就不会遇到任何范围问题。除此之外，出于类似的原因，document.addEventListener('DOMContentLoaded', function() { 在jQuery“就绪”块中再有另一个也是没有意义的！你根本不需要它。我只能假设您不理解该代码的作用并认为它是 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/