Question

我仍然是一名新程序员，我在使用这段代码时遇到了问题（我从here获得）。它使用MySQL来存储数据。我想了解所有各个部分，但我现在才真正开始了解ajax和jQuery如何协同工作。

它用于显示数据，它依赖于“events.php”。我已经单独运行它，它生成的JSON应该可以在日历中显示，所以我知道SQL工作正常，但它不会显示在主页面上。库，CSS等的路径已经改变，但是插入MySQL表的函数工作正常...所以我可以使用它来插入日期，但是一旦出现，它们就不会出现在刷新。

编辑：已解决。三个问题的组合，据我所知：（1） - 确保返回的JSON没有“假”周围的引号。（2）确保你有jquery.min.map。（这是通过查看Chrome的调试器找到的），以及（3）我无法使用文件的路径...我只是将其称为“events.php”。感谢所有帮助过的人！ / p>

这是下面的html ......以及这下面的JSON。我看过其他一些从未有过解决方案的帖子，显然，任何帮助都非常感激：

<!DOCTYPE html>
<html>
<head>
    <link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
    <script src='lib/jquery.min.js'></script>
    <script src='lib/jquery-ui.custom.min.js'></script>
    <script src='fullcalendar/fullcalendar.min.js'></script>
    <script>

        $(document).ready(function() {
            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();

            var calendar = $('#calendar').fullCalendar({
                editable: true,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },

                events: "http://localhost/tpsdb/fullcalendar/events.php",

                // Convert the allDay from string to boolean
                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/tpsdb/fullcalendar/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/tpsdb/fullcalendar/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/tpsdb/fullcalendar/update_events.php',
                        data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
                        type: "POST",
                        success: function(json) {
                            alert("Updated Successfully");
                        }
                    });

                }

            });

        });

    </script>
    <style>

        body {
            margin-top: 40px;
            text-align: center;
            font-size: 14px;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;

        }


        #calendar {
            width: 900px;
            margin: 0 auto;
        }

    </style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>

events.php页面生成的JSON：

[{"id":"7","title":"test","start":"2014-02-05 00:00:00","end":"2014-02-05 00:00:00","url":"","allDay":"false"},{"id":"8","title":"Title 2","start":"2014-02-06 00:00:00","end":"2014-02-06 00:00:00","url":"","allDay":"false"},{"id":"9","title":"Feb 1","start":"2014-01-28 00:00:00","end":"2014-01-28 00:00:00","url":"","allDay":"false"}]

这是PHP创建JSON以根据正确的格式去除引号（true不会出现在我的JSON字符串中）。

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

    // Query that retrieves events
    $requete = "SELECT * FROM evenement ORDER BY id";

    // connection to the database
    include ("../includes/functions.php");

    // Execute the query
    $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));

    // sending the encoded result to success page
    $tempjson =  json_encode($resultat->fetchAll(PDO::FETCH_ASSOC));
    $tempjson = str_replace('"false"', 'false', $tempjson);
    echo $tempjson;

?>

我的传奇中的更多信息 - 它可以帮助那些追随我的脚步：显然提供的lib不包括jquery.min.map（我还没有研究它是什么）。感谢您询问Chrome中的f12控制台。我看到min.map丢失了。虽然仍然没有帮助我:(工作......

以下是Chrome浏览器的屏幕截图。 enter image description here

Answer 1

尝试替换：

 events: "http://localhost/tpsdb/fullcalendar/events.php",

使用：

 eventSources: [

                     {
                         url: 'http://localhost/tpsdb/fullcalendar/events.php',
                         type: 'GET',
                         data: {},
                         error: function () {
                             alert('There was an error while fetching events!');
                         }
                     }
    ],

Answer 2

你是否考虑过这个事实

月值为0，表示1月= 0，2月= 1，等等。

http://arshaw.com/fullcalendar/docs/current_date/month/

所以'2014-02-05'将是3月5日。

Answer 3

同时修改：

[
{
    "id": "7",
    "title": "test",
    "start": "2014-02-05 00:00:00",
    "end": "2014-02-05 00:00:00",
    "url": "",
    "allDay": false  <-- change this to false without quotes
},
{
    "id": "8",
    "title": "Title 2",
    "start": "2014-02-06 00:00:00",
    "end": "2014-02-06 00:00:00",
    "url": "",
    "allDay": "false"
},
{
    "id": "9",
    "title": "Feb 1",
    "start": "2014-01-28 00:00:00",
    "end": "2014-01-28 00:00:00",
    "url": "",
    "allDay": "false"
}
]

Fullcalendar不显示数据

3 个答案: