【问题标题】:Fullcalendar isn't loading my json to show eventsFullcalendar 没有加载我的 json 来显示事件
【发布时间】:2021-02-07 18:22:44
【问题描述】:

我一直在搞乱 fullcalendar java 脚本,我似乎无法让日历加载我的 mysql 数据库中的任何数据。

我的 db-connect.php 文件在我测试时返回表中的第一个条目,但仍未填充到日历中。

<?php
// List of events
$events = array();

// connection to the database
$mysqli = new mysqli("localhost","username","password","database");

//check connection
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

//fetches and sends data in string
$result = $mysqli->query("SELECT * FROM events ORDER BY id");
$events = $result->fetch_array(MYSQLI_ASSOC);
echo json_encode($events);
?>

我还有一个 get_events.php,我尝试将其设置为仅提取日期范围。当我测试它时它不会提取任何信息,但这应该是因为我正在测试它没有日期范围。

<?php
// List of events
$events = array();
$start = $_GET["start"];
$end = $_GET["end"];

// connection to the database
$mysqli = new mysqli("localhost","agaraapp_events","!QAZ@WSX3edc4rfv","agaraapp_events");

//check connection
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

//fetches and sends data in string
$query = mysqli_query($link, "SELECT * FROM events WHERE start >= '$start' AND end <= '$end'");
while($fetch = mysqli_fetch_array($query,MYSQLI_ASSOC)) {
   $e = array();
   $e['id'] = $fetch['id'];
   $e['title'] = $fetch['title'];
   $e['start'] = $fetch['start'];
   $e['end'] = $fetch['end'];
   array_push($events, $e);
}
echo json_encode($events);
?>

那么这是我的日历代码。

   <head>    
        <meta charset="utf-8" />
        <link href="CalendarJava/main.css" rel="stylesheet" />
        <script src="CalendarJava/main.js"></script>
        <script>
          document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
              schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
              initialView: 'dayGridMonth',  
                events: {
            url: 'get_events.php',
            type: 'POST',
            data : {
            },
            success : function(response){
              }
       }  
             });
            calendar.render();
          });    
        </script>    
      </head>

我已将 url 更改为 get_events.php 和 db-connect.php 但每次我加载它时都会显示一个空白日历。我猜我需要一个 Ajax 代码,但我对这些不太了解。如果这就是我所缺少的,那么我会尝试研究它并添加它。

对出现问题的任何帮助都会有所帮助。我已经阅读了一堆关于此的“相关”问题,但这些问题似乎都没有解决我的问题。

EDIT1

db-connect.php 返回以下结果,看来是正确的格式

{"id":"1","title":"Test","start":"2021-02-06 10:38:24","end":"2021-02-06 12:38:24"} 

服务器端也没有错误

【问题讨论】:

  • I'm guessing I need an Ajax code...不,fullCalendar 会自动为您处理 AJAX 请求(根据 fullcalendar.io/docs/events-json-feed)。但是,您确实需要进行一些基本调试并检查 a) 请求是否成功(即浏览器控制台中没有错误,网络工具中没有非 200 响应代码,PHP 错误日志中没有记录错误(或显示在对 AJAX 的响应),以及 b) 返回的 JSON 数据 1) 包含至少一项,以及 2) 数据采用 fullCalendar 要求的格式。如果您不确定其中任何一项,请提供更多详细信息。
  • 我更新了“EDIT1”下的原始内容以显示您提出的大部分问题。我将再次查看 events-json-feed 链接,看看我是否遗漏了什么。
  • 感谢您的更新。这是单个事件的正确格式,但是您返回到 fullCalendar 的内容必须是一个数组(即使其中只有一个项目)。调整您的 PHP 代码,使其声明一个空数组,然后遍历查询结果中的所有行,并将每一行放入数组中。然后,将该数组编码为 JSON 并回显它

标签: javascript php json fullcalendar fullcalendar-5


【解决方案1】:

您可以尝试以下方法,首先将 JSON 响应作为数组返回,然后设置正确的响应标头。

<?php
  // List of events
  $events = array();

  // connection to the database
  $mysqli = new mysqli("localhost","username","password","database");

  //check connection
  if (mysqli_connect_errno()) {
      printf("Connect failed: %s\n", mysqli_connect_error());
      exit;
  }

  //fetches and sends data in string
  $result = $mysqli->query("SELECT * FROM events ORDER BY id");
  while ($event = $result->fetch_array(MYSQLI_ASSOC)) {
    $events[] = $event;
  };

  // response should be associated with the correct header setting
  header('Content-Type: application/json; charset=utf-8');

  // now we can JSON the response
  echo json_encode($events);

  // in case we have some more code afterwards in some if statements 
  exit;
?>

【讨论】:

  • 这有助于编辑 PHP 文件,提供了非常有用的信息。我对其进行了测试,它现在将我所有的事件作为一个数组返回。现在只需要获取事件日历即可显示结果。一旦我得到它的工作将发布更新。
  • 设法让数组在我的日历上正确填充,这个 PHP 代码解决了我 99% 的问题。
猜你喜欢
  • 2011-02-21
  • 1970-01-01
  • 2023-04-04
  • 1970-01-01
  • 1970-01-01
  • 2014-02-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多