FullCalendar 不显示事件

Question

我还是 fullCalendar 的新手，我正在尝试显示从 Mysql 数据库中检索到的事件。我的table的结构如下：

我的table内容如下：

下面是我用来生成完整日历的脚本：

<script>
        $(document).ready(function(){
            $('#calendar').fullCalendar({
                editable:true,
                header:{
                left:'prev, next today',
                center:'title',
                right:'month, agendaWeek, agendaDay'
                },
                //events: 'loadCalendarEvents.php'
                events: function(start, end, timezone, callback){
                  $.ajax({
                    url: 'loadCalendarEvents.php',
                    dataType: 'json',
                    data: {
                    },
                    success: function(data){
                      var events = [];
                  
                      for (var i=0; i<data.length; i++){
                        events.push({
                          title: data[i]['class'],
                          start: data[i]['start_event'],
                          end: data[i]['end_event'],
                        });
                      }
                    }
                  });
                }
            });
        });
    </script>

下面是添加事件的文件 (loadCalendarEvents.php):

<?php
    include("db.php");//Includes the database file that makes the connection
    $timetable = mysqli_query($conn, "SELECT class, start_event, end_event  FROM lecturertimetable");//Loading events for the calendar
    $myArray = array();
    if ($timetable->num_rows > 0) {
        // To output the data of each row
        while($row = $timetable->fetch_assoc()) {
            $myArray[] = $row;
        }
    } 
    echo json_encode($myArray);
?>

但是，none 的事件正在显示，我不确定我做错了什么。

Answer 1

这是因为您的 HTML 页面在页面加载时呈现 FullCalendar javascript。所以那时你没有任何事件。（因为浏览器必须向 loadCalendarEvents.php 发出请求才能获取事件。）

您可以通过三种方式解决此问题。

为控制器中的事件创建 JSON 对象并作为参数传递。
向 loadCalendarEvents.php 发出 AJAX 请求，成功后，将事件加载到日历中。
向 loadCalendarEvents.php 发出 AJAX 请求，并在成功时呈现 fullCalendar。

以下代码发送 AJAX 调用以获取来自 loadCalendarEvents.php 的事件。

$('#calendar').fullCalendar({
      events: function(start, end, timezone, callback) {
         $.ajax({
            url: 'loadCalendarEvents.php',
            dataType: 'json',
            data: {
               // If you have some data to send to loadCalendarEvents.php
                id: 1,
                name: "hello"
             },
             success: function(data) {
                  var events = [];
                  
                  for (var i=0; i<data.length; i++){
                       events.push({
                            title: data[i]['class'],
                            start: data[i]['start_event'],
                            end: data[i]['end_event'],
                       });
                   }

                   //adding the callback
                   callback(events);
              }
         });
     }
 });

Answer 2

我从 original version of your question 中注意到，您最初只是将数据馈送指定为

events: 'loadCalendarEvents.php'

这种方法没有任何问题 - documented by fullCalendar。 FullCalendar 会在需要获取事件时自动向 URL 发送 AJAX 请求。

该版本的唯一问题是 class、start_event 和 end_event 字段的命名不正确 - 您需要将它们命名为 title、start 和 end 精确匹配 names required by fullCalendar，否则它不会识别或使用它们，当然没有识别时间和描述的事件不能显示在日历上。

有两种可能的修复方法：

只需将您的数据库列重命名为 title、start 和 end.
使用 PHP 创建一个字段命名正确的数组：

代码：

while($row = $timetable->fetch_assoc()) {
    $myArray[] = array(
      "title" => $row["class"],
      "start" => $row["start_event"],
      "end" => $row["end_event"],
    );
}

N.B。您还应该（根据文档）修改 PHP 以便它注意到 fullCalendar 自动附加到请求的 start 和 end 参数，并限制您的 SQL查询仅返回那些日期之间的事件。这样，fullCalendar 将只获得它实际需要的数据，而不会低效地下载（可能）用户不会查看的多年历史数据。

P.S。如果您刚刚开始使用 fullCalendar，我建议您使用最新的版本 5，而不是您在这里使用的版本 3。它有更多的功能，修复了许多错误，并且它的性能得到了改进。参见 https://fullcalendar.io/docs/v5/getting-started

FullCalendar 不显示事件

FullCalendar not displaying events

javascript

php

html

fullcalendar

fullcalendar-3