jquery - FullCalendar，事件不刷新

Question

这是我的 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”，因为我需要我的日历是法语。

Answer 1

你的方法确实是错误的。这应该效果更好:

$('#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 属性在完整日历中。