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 的内置架构定义了日历的事件源。每当日历视图和/或日期范围发生更改时，它都会自动重新运行。请注意，实际上您的 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”调用客户端代码，只需在 fullCalendar 中编写 `events: "ajaxRefresh.php" 作为 events 属性即可。