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

Question

我正在尝试使用托管在 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 页面，但都没有奏效。如果有人能指出我哪里出错了，那就太好了。

Answer 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。

Answer 2

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

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