在FullCalendar中添加事件的问题

Question

我在添加“ FullCalendar”中添加事件的问题有问题，请记住我的JavaScript知识很小，因此解决方案可能很简单。

无论哪种方式，我已经开始使用FullCalendar来显示我已经存在的数据库中的事件，到目前为止，它运行良好，只是在渲染日历后很难添加事件。

我遵循了文档，我的代码：

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

function addevent() {
      calendar.addEvent({
         start: '2022-05-23T14:00:00',
         end: '2022-05-23T15:00:00',
         title: 'Test'
      }
}

函数addevent（）在完成页面上的表单后，该表单与Ajax提交并存储在数据库中，需要一个页面刷新以显示该事件，但是我想立即展示它。

但是，IM遇到“未定义”的错误，这是有道理的，因为我没有澄清变量。我不知道如何实现此功能，而且我似乎也无法在文档中找到它。 我尝试了以下代码：

function addevent() {
    var event = {
          start: '2022-05-23T14:00:00',
          end: '2022-05-23T15:00:00',
          title: 'Test'
    }

    $('#calendar').fullCalendar('renderEvent',event,true);
}

返回“ $（...）。fullcalendar不是一个函数”，这似乎在我认为我使用的旧版本上，我正在使用版本5。

经过一番谷歌搜索， 提前致谢！

Answer 1

这仅是关于可变范围的。 日历在您的addevent函数中没有可用，因为您在domcontentloaded回调中将其声明为，因此仅在该回调函数中访问。

解决此问题的一种方法是使变量全局：

var calendar = null;

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

function addevent() {
      calendar.addEvent({
         start: '2022-05-23T14:00:00',
         end: '2022-05-23T15:00:00',
         title: 'Test'
      });
}

参考/更广泛的读数： javaScript中变量的范围是什么？

---

ps你正确$（'＃galudar'）。fullcalendar（'renderevent'，event，true）;是来自的语法> FullCalendar的较旧版本，特别是V3和更早的fullcalendar作为jQuery插件。