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

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

这里有两个问题：

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

function( fetchInfo, successCallback, failureCallback ) {
您忘记使用提供的回调 return 事件到 fullCalendar。所以你的功能是下载事件并记录它们，但它们永远不会进入日历。

因此：

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

应该修复它。

P.S。实际上，您还应该使用 fetchInfo 对象中提供的开始和结束日期发送到您的服务器，并且服务器应该使用它们将它 return 的事件限制为仅发生（或重叠）的事件那些日期。这样你就不会 return 大量的事件，而这些事件大多不会被查看，而你只会 return 显示与日期范围相关的内容。

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

how to display data from database on full calendar?

php

html

json

fullcalendar

fullcalendar-5