Fullcalendar不显示数据

我仍然是一个新的程序员,我有一个问题让这段代码工作(我从这里得到)。 它使用MySQL来存储数据。 我想了解所有各个部分,但我现在才真正开始了解ajax和jQuery如何协同工作。

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

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

这是下面的html ……以及这下面的JSON。 我看过其他一些从未有过解决方案的post,显然,任何帮助都非常感激:

        $(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"); } }); } }); });   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; }    

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字符串中)。

 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浏览器的屏幕截图。 在此处输入图像描述

尝试替换:

  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!'); } } ], 

你考虑过这个事实了吗?

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

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

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

同时修改这个:

 [ { "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" } ]