如何从 fullcalendar 获取所有事件答案

【问题标题】：how to get all events from fullcalendar如何从 fullcalendar 获取所有事件
【发布时间】：2021-01-09 09:01:59
【问题描述】：

我有以下代码，我试图检索完整日历中的所有事件：

<!DOCTYPE html>
<html>
<head>
  <title>Fullcalendar Demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.css"/>
  <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.js"></script>
</head>
<body>
  <button onclick="getEvents()">Click me</button>
  <div id="calendar"></div>
  <script>

    document.addEventListener('DOMContentLoaded', function() {
      var calendarEl = document.getElementById('calendar');
      var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'timeGridWeek',
        editable: true,
        headerToolbar: {
            start: 'prev,next today',
            center: 'title',
            end: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        selectable: true, //can click to set event
        selectMirror: true, // so it's solid 
        unselectAuto: false, //if you click outside calendar, event doesn't disappear, but if you click inside calendar, event still disappears
        eventStartEditable: true,
        eventResizableFromStart: true,
        eventDurationEditable: true,
        select: function(selectionInfo) {
            calendar.addEvent({
              title: 'dynamic event',
              start: selectionInfo.start,
              end: selectionInfo.end //need these and not endTime/startTime, otherwise they won't re-render
            });
            calendar.unselect();
        },
        eventClick: function(eventClickInfo) {
            eventClickInfo.event.remove();
        }



      });
      calendar.render();

      function getEvents() {
        console.log(calendar.getEvents());
      }

    });

  </script>
</body>
</html>

当我单击页面顶部的按钮时，为了调用 getEvents() 函数来控制台记录事件，我目前收到错误“未捕获的 ReferenceError：getEvents 未定义”，我可以了解函数的放置位置，但如果我将它放在 document.addEventListener('DOMContentLoaded', function() 块之外，那么 calendar 变量将不在范围内，因此我将无法调用日历的 getEvents() 方法。有谁知道我还能如何检索事件？（稍后我想在单击按钮时使用事件的数据来调用发布路由）

【问题讨论】：

标签： javascript html fullcalendar fullcalendar-5

【解决方案1】：

您可以通过添加addEventListener 为该按钮提供一个 id 并监听点击事件

现场演示：

    document.addEventListener('DOMContentLoaded', function() {
      var calendarEl = document.getElementById('calendar');
      var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'timeGridWeek',
        editable: true,
        headerToolbar: {
            start: 'prev,next today',
            center: 'title',
            end: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        selectable: true, //can click to set event
        selectMirror: true, // so it's solid 
        unselectAuto: false, //if you click outside calendar, event doesn't disappear, but if you click inside calendar, event still disappears
        eventStartEditable: true,
        eventResizableFromStart: true,
        eventDurationEditable: true,
        select: function(selectionInfo) {
            calendar.addEvent({
              title: 'dynamic event',
              start: selectionInfo.start,
              end: selectionInfo.end //need these and not endTime/startTime, otherwise they won't re-render
            });
            calendar.unselect();
        },
        eventClick: function(eventClickInfo) {
            eventClickInfo.event.remove();
        }



      });
      calendar.render();

      function getEvents() {
        console.log(calendar.getEvents());
      }
      
      document.getElementById('getevent').addEventListener('click', getEvents);

    });

<!DOCTYPE html>
<html>
<head>
  <title>Fullcalendar Demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.css"/>
  <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.js"></script>
</head>
<body>
  <button id="getevent">Click me</button>
  <div id="calendar"></div>
</body>
</html>

【讨论】：