jQuery fullcalendar 插件不呈现从数据库中检索到的事件答案

【问题标题】：jQuery fullcalendar plugin not rendering the events retrieved from databasejQuery fullcalendar 插件不呈现从数据库中检索到的事件
【发布时间】：2013-12-04 16:16:29
【问题描述】：

我正在尝试在我的网页上向 fulllcalendar 添加一些事件。但它会从数据库中检索值，但不会在日历中显示结果。

php

$q = "SELECT * FROM `events` ORDER BY `id`";
$result = $mysqli->query($q) or die(mysql_error());
echo json_encode(mysqli_fetch_array($result));

var calendar = $('#calendar').fullCalendar({
    editable: true,
    header: {
        left: 'prev,next',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    events: "http://localhost/xxx/events.php",
    eventRender: function(event, element, view) {
        if (event.allDay === 'true') {
            event.allDay = true;
        } else {
            event.allDay = false;
        }
    },
    selectable: true,
    selectHelper: true,
    select: function(start, end, allDay) {
        var title = prompt('Event Title:');
        var url = prompt('Type Event url, if exits:');
        if (title) {
            var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
            var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
            $.ajax({
                url: 'http://localhost/xxx/add_events.php',
                data: 'title='+ title+'&start='+ start +'&end='+ end +'&url='+ url ,
                type: "POST",
                success: function(json) {
                    alert('Added Successfully');
                }
            });
            calendar.fullCalendar('renderEvent',
                {
                    title: title,
                    start: start,
                    end: end,
                    allDay: allDay
                },
                true // make the event "stick"
            );
        }
        calendar.fullCalendar('unselect');
    },
    editable: true,
    eventDrop: function(event, delta) {
        var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
        var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
        $.ajax({
            url: 'http://localhost/xxx/update_events.php',
            data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
            type: "POST",
            success: function(json) {
                alert("Updated Successfully");
            }
        });
    },
    eventResize: function(event) {
        var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
        var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
        $.ajax({
            url: 'http://localhost/xxx/update_events.php',
            data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
            type: "POST",
            success: function(json) {
                alert("Updated Successfully");
            }
        });

json

{"0":"1","id":"1","1":"1","userid":"1","2":"sample","title":"sample","3":"2013-12-03 08:52:20","start":"2013-12-03 08:52:20","4":"2013-12-05 08:52:20","end":"2013-12-05 08:52:20","5":"0","allday":"0"}

请任何人帮我解决这个问题...

【问题讨论】：

标签： javascript php jquery json fullcalendar

【解决方案1】：

从您的 JSON 来看，您的问题是 fullCalendar jQuery 插件要求将所有日期时间值转换为 UNIX 时间戳。

这可能会有所帮助datetime - convert date to unixtime php - Stack Overflow

【讨论】：

感谢您的快速回复。现在我将date 转换为unixtimestamp JSON 是{"userid":"1","title":"sample","start":1386057140,"end":1386229940,"allday":"0"} 仍然没有显示事件
可能是您的某些参数的大小写与event object不匹配。例如将“allday”改为“allDay”，如果要使用，不要使用“0/1”，而是使用不带双引号的true/false。 “userid”也不是事件对象的一部分，因此也可能导致一些问题。我希望这会有所帮助。
对不起，它不起作用我已将 allday 更改为 allDay 和 userid 更改为 id，而且我尝试删除 allDay 仍然无法正常工作
Justed 研究了我如何在我的网站上实现这一点。试试$(document).ready(function() { $('#calendar').fullCalendar({ ... }); }); 而不是var calendar = ...
如果我手动删除var also the result is same. If I enter the event 对象，它会起作用。我的 json 格式是否正确？？？

【解决方案2】：

我猜我终于解决了这个问题。出于某种原因，如果事件是在数组中提供的，那么完整的日历会呈现事件，所以就像这样。

Array[
   Jason Objects {},{},{} as many as you want
]

对我来说，下面的代码就像一个魅力。

$data = array(
    array(
        'id' => $event->_id
        'title' => $event->eventName,
        'start' => date($event->start)
    )
);
return Response::json($data);

顺便说一句，你的第一个 json 对象是正确的，只需将 userid 更改为 id 并通过一个数组传递它我猜它应该可以工作。

希望这会有所帮助，快乐编码:)

【讨论】：