Fullcalendar 使用 JSON PHP 页面作为事件源

Posted 2023-02-24

【中文标题】Fullcalendar 使用 JSON PHP 页面作为事件源

【英文标题】：Fullcalendar using a JSON PHP page as an event source

【发布时间】：2014-10-14 03:07:41

【问题描述】：

我正在尝试使用托管在 mysql 服务器上的 php 页面，该页面生成我想要在 Ionic 应用程序中的 Fullcalendar 的“eventSources”数组中使用的 JSON 提要。日历正在呈现，但未在提要中显示日期。我已经为此工作了几天，Fullcalendar 网站上的所有文件都不起作用。

这是 JSON 字符串：

 "success":1,"message":"Details Available!","events":[
 "ID":"1","title":"Example Class","start":"2014-08-29 09:00:00","end":"2014-08-29 17:00:00","all_day":"0",
 "ID":"2","title":"Example Class 2","start":"2014-08-13 00:00:00","end":"2014-08-13 00:00:00","all_day":"0",
 "ID":"3","title":"Example Event with Time","start":"2014-08-13 12:00:00","end":"2014-08-13 13:00:00","all_day":"0",
 "ID":"11","title":"Testing 123","start":"2014-08-13 00:00:00","end":"2014-08-13 23:59:00","all_day":"1"]

这是生成上述 JSON 的 PHP 页面：

<?php

ini_set('display_errors',1);
error_reporting(E_ALL);

header("Content-Type:application/json");
header("Access-Control-Allow-Origin: *");

$user="user";
$pass="password";
$table="database";


$db=new PDO("mysql:host=localhost;dbname=$table", $user,$pass);

//initial query
$query = "Select * FROM table";

//execute query
try 
      $stmt   = $db->query($query);
     
catch (PDOException $ex) 
      $response["success"] = 0;
      $response["message"] = "Database Error!";
      die(json_encode($response));
     

 // Finally, we can retrieve all of the found rows into an array using fetchAll 
 $rows = $stmt->fetchAll();


 if ($rows) 
     $response["success"] = 1;
     $response["message"] = "Details Available!";
     $response["events"]   = array();

 foreach ($rows as $row) 
     $post             = array();
$post["ID"]  = $row["ID"];
     $post["title"] = $row["title"];
     $post["start"]    = $row["start"];
     $post["end"]  = $row["end"];
     $post["all_day"] = $row["all_day"];

     //update our repsonse JSON data
     array_push($response["events"], $post);
    


     // echoing JSON response
     echo json_encode($response);

    else 
            $response["success"] = 0;
            $response["message"] = "No Events Available!";
            die(json_encode($response));
       

   ?>

这是日历的控制器：

App.controller('LogHomeCtrl', function($scope, $log, $state)

$scope.TimeTabl = function()

    $state.go('timetable');

);

App.controller('calCtrl', function ($scope, $log, $state)

$scope.eventSources = [

    events: 
        url: 'url/calendarConnect.php',
        type: 'POST',
        error: function() 
            alert('there was an error while fetching events!');
        ,
        color: 'yellow',   // a non-ajax option
        textColor: 'black' // a non-ajax option
    


];
);

我尝试过使用不同的方法来调用 PHP 页面，但都没有奏效。如果有人能指出我哪里出错了，那就太好了。

【参考方案1】：

有几种方法可以为日历设置events：

1.as 数组：

events: [
    
        title: 'Example Class',
        start: '2014-08-29 09:00:00',
        end: '2014-08-29 17:00:00'
    ,
    
        title: 'Example Class 2',
        start: '2014-08-13 00:00:00',
        end: '2014-08-13 00:00:00'
    
]

2.作为json对象：

events: 'url/calendarConnect.php' //must to return json similar to previous example

3.作为函数：

events: function(start, end, timezone, callback) 
    $.ajax(
        url: 'url/calendarConnect.php',
        dataType: 'json',
        success: function(response) 
            //get your events from response.events
            console.log(response);
        
    );

4.as 自定义函数：

$.ajax(
    url: 'url/calendarConnect.php',
    dataType: 'json',
    success: function(response) 
        //just example
        $('.calendar').fullCalendar(
            events: response.events
        );    
        
);

在您的情况下，第三种方式更合适。更多活动详情请关注官方Fullcalendar documentation。

【讨论】：

谢谢你的回答，它几乎已经奏效了，但是我现在在解释成功函数后在文档函数末尾使用的回调函数有问题，它一直响应“未定义”不是函数/未知标识符”，具体取决于我在代码中的位置。

你需要在成功函数中调用callback(response.events)，它应该可以工作。此外，您可以创建简单的 ajax 函数并将其设置为对日历事件的响应。请看我更新的答案。

我通读了函数文档，在代码开始工作之前一直弄乱了代码，对于迟到的回复感到抱歉。我忘了设置为答案。

【参考方案2】：

尝试更改此设置（在 ["events"] 后添加 []）：

array_push($response["events"][], $post);