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

时间:2013-12-04 16:16:29

标签: javascript php jquery json fullcalendar

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

PHP

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

JS

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"}

请有人帮我解决这个问题...

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

我猜我终于解决了这个问题。出于某种原因,如果事件是在数组内部提供的,那么完整的日历将呈现事件,因此就像这样。

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并将其传递给数组,我猜它应该可以正常工作。

希望这会有所帮助,Happy Coding:)