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/