如何在完整日历上显示数据库中的数据？

Question

我有以下数据

然后我想在完整的日历中显示

<script>
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'
    },
    events: function(start, end, timezone, callback) {
      $.ajax({
        url: '<?php echo site_url("absentMonthYearController/absentYearController/calendarShow/" . $nik) ?>',
        type: 'GET',
        dataType: 'JSON',
        success: function(data) {
          var events = [];
          if (data != null) {
            $.each(data, function(i, item) {
              events.push({
                start: item.date,
                title: 'Present',
                display: 'background'
              })
            })
          }
          console.log('events', events);
        }
      })
    }
  });
  calendar.render();
});

数据不会出现在日历中，但会出现在 console.log 中

Answer 1

这里有两个问题：

1. events: function(start, end, timezone, callback) {对于 fullCalendar 5 是错误的。这看起来像早期版本的语法。 https://fullcalendar.io/docs/v5/events-function显示了函数在 v5 中的签名，即

   function( fetchInfo, successCallback, failureCallback ) {

2. 您忘记使用提供的回调将事件返回给 fullCalendar。 因此，您的 function 正在下载事件并记录它们，但它们从未进入日历。

因此：

events: function( fetchInfo, successCallback, failureCallback ) { 
  $.ajax({
    url: '<?php echo site_url("absentMonthYearController/absentYearController/calendarShow/" . $nik) ?>',
    type: 'GET',
    dataType: 'JSON',
    success: function(data) {
      var events = [];
      if (data != null) {
        $.each(data, function(i, item) {
          events.push({
            start: item.date,
            title: 'Present',
            display: 'background'
          })
        })
      }
      console.log('events', events);
      successCallback(events);
    }
  })
}

应该修复它。

---

PS 实际上，您还应该使用 fetchInfo object 中提供的开始和结束日期发送到您的服务器，并且服务器应该使用它们将返回的事件限制为仅在这些日期内发生（或重叠）的事件。 这样一来，您就不会返回大部分从未被查看过的大量事件，而是只返回与显示的日期范围相关的内容。