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应该被接受＆＃34; start＆＃34;和＆＃34;结束＆＃34;参数，仅返回当前在日历上显示的日期的数据。这样您就不会下载超出实际需要的数据，这将提高性能，特别是如果您的应用程序运行多年并收集大量数据，大多数用户在确定后不再查看点。

然后，当您点击＆＃34;刷新＆＃34;时，它会运行＆＃34; refetchEvents＆＃34;手动方法，这只会导致您提供给＆＃34;事件＆＃34;参数再次作为额外的电话。

有关详细信息，请参阅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页面符合这个所需的结构，你可以简化一些事情并删除＆＃34; ajax＆＃34;完全从客户端代码调用，只需编写`events：＆＃34; ajaxRefresh.php＆＃34;作为fullCalendar中的events属性。

Answer 2

时间不是有效的javascript日期时间。你需要将开始和结束转换为javascript datetime

示例： -

var d = new Date("2015-03-25T12:00:00-06:30");

Answer 3

我修改了您的问题代码，

<script type="text/javascript">
$('#refresh').on('click', function(){
$.ajax({
    url: 'ajaxRefresh.php',
    type: 'POST',
    data: 'type=fetch',
    success: function (data) {
                var events = [];
                var myCalendar = $('#calendar');
                myCalendar.fullCalendar();
                $('#calendar').fullCalendar('removeEvents');  //reset existing data in calendar
                $.each(data.d, function (index, value) {
                    events.push({
                        id: value.id,
                        title: value.title,
                        start: FormatDate(value.start),
                        end: FormatDate(value.end),
                        allDay: value.allDay, 
                        color: '#1C84C6',
                    });
                    myCalendar.fullCalendar('renderEvent', events[index]); //inserts the event into calendar plugin
                });
            }
   });
})

 function FormatDate(data) {
        var pattern = /Date\(([^)]+)\)/;
        var results = pattern.exec(data);
        return new Date(parseFloat(results[1]));
    }
</script>

FullCalendar，事件不会刷新

3 个答案: