这是我的 jquery 代码:
<script type="text/javascript">
$('#refresh').on('click', function(){
var json_events;
$.ajax({
url: 'ajaxRefresh.php',
type: 'POST',
data: 'type=fetch',
success: function(response){
json_events = response;
console.log(response);
}
});
$('#calendar').fullCalendar({
events: json_events
});
})
</script>
事实上一切都很好,除了当我单击按钮时日历没有更新。
我做了一个 console.log 来查看 ajax 返回的 JSON 是否正常。我得到了:
[{"id":"10","title":"Rugby","start":"2017-05-16T00:01:00+05:30","end":"2017-05-19T00:01:00+05:30","allDay":false}]
预先感谢您的宝贵帮助。
PS:我包含了“fr.js”,因为我需要我的日历是法语。
最佳答案
你的方法确实是错误的。这应该效果更好:
$('#calendar').fullCalendar({
events: function( start, end, timezone, callback ) {
$.ajax({
url: 'ajaxRefresh.php',
type: 'POST',
data: 'type=fetch',
success: function(response){
console.log(response);
callback(response); //sends the events to fullCalendar
}
});
}
});
$('#refresh').on('click', function(){
$("#calendar").refetchEvents();
});
这使用 fullCalendar 的内置架构定义了日历的事件源。每当日历 View 和/或日期范围发生更改时,它都会自动重新运行。请注意,实际上您的 PHP 应该接受“开始”和“结束”参数,并且仅返回当前显示在日历上的日期的数据。这样,您就不会下载比实际需要更多的数据,这将提高性能,特别是如果您的应用运行多年并收集大量数据,其中大多数数据在某个时间点后用户将不会再查看。
然后,当您单击“刷新”时,它会手动运行“refetchEvents”方法,这只会导致您再次提供给“events”参数的相同函数作为额外调用。
参见https://fullcalendar.io/docs/event_data/events_function/和 https://fullcalendar.io/docs/event_data/refetchEvents/了解更多详情。
也许也值得一看 https://fullcalendar.io/docs/event_data/events_json_feed/ - 如果您可以使您的 PHP 页面符合此要求的结构,您可以简化事情并从客户端代码中完全删除“ajax”调用,只需编写 `events: "ajaxRefresh.php"作为 events 属性在完整日历中。
关于jquery - FullCalendar,事件不刷新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43920576/