Ajax 數據庫更新后在 fullCalendar 中重新呈現事件

Question

我試圖讓 fullCalendar 反映通過 AJAX 對數據庫所做的更改。 問題是它不會在成功的 AJAX 調用后更新屏幕上的日歷。

$.ajax({
    type: "POST",
    url: "eventEditXHR.php",
    data: {
       //the data
    },
    success: function(text) {
      $("#calendar").fullCalendar("refetchEvents");
    }....

我是不是用錯了方法？ 無需重新加載整個頁面即可完成此操作的最佳方法是什么？ 感謝您提供任何意見！

Answer 1

有幾種方法。 有些不那么優雅。

1. 如果你使用 FullCalendar 來抓取 json 事件：

$('#calendar').fullCalendar({ events: "json-events.php",    });

做就是了：

$('#calendar').fullCalendar( 'refetchEvents' );

如果您希望外部方法獲取事件，您可以這樣做。 不優雅，但會工作

$('#calendar').fullCalendar( 'removeEventSource', source )
$('#calendar').fullCalendar( 'addEventSource', source )

Answer 2

您可以分 3 個步驟渲染事件..

1) 刪除所有事件

.fullCalendar( 'removeEvents');

2) 添加事件源

.fullCalendar( 'addEventSource', events);         

3) 渲染事件

.fullCalendar( 'rerenderEvents' );

喜歡...

$.ajax({
    type: "POST",
    url: "eventEditXHR.php",
    data: {       //the data    },
    success: function(events)
      {
              $('#calendar').fullCalendar('removeEvents');
              $('#calendar').fullCalendar('addEventSource', events);         
              $('#calendar').fullCalendar('rerenderEvents' );
       }.
     });

Answer 3

對於 FullCalendar v3.8.0，以下內容將起作用：

var events = [
    {title: 'Business Lunch', start: '2017-12-03T13:00:00'},
    {title: 'Meeting', start: '2017-12-13T11:00:00'},
    {title: 'Conference', start: '2017-12-18', end: '2017-12-20'},
];

$('#calendar').fullCalendar({
    defaultDate: '2017-12-12',
    events: function (start, end, tz, callback) {
        callback(events);
    }
});

events.push({title: 'Party', start: '2017-12-29T20:00:00'});
$('#calendar').fullCalendar('refetchEvents');

jsbin

Answer 4

這是在 ASP.NET CORE, MVC 6 中的工作原理：

 success: function(events)
 {
        $('#calendar').fullCalendar('rerenderEvents');
        $('#calendar').fullCalendar('refetchEvents');
 }

雖然這是在 ASP.NET MVC 5 中工作的：

 success: function(events)
 {
       $('#calendar').fullCalendar('refetchEvents');
 }

Answer 5

什么對我有用：

success: function(text) {
                setTimeout(function(){
                    $("#calendar").fullCalendar("rerenderEvents");
                },50);
            }

如果我在沒有超時的情況下直接執行它不起作用，可能是由於 $element.fullCalendar 變量尚未完全設置？

Answer 6

一行完成工作：

$('#calendar').fullCalendar('refetchEventSources', 'eventEditXHR.php')

遲到的回復，但這應該是自 2.8.0 以來最有效的方式

Answer 7

 eventDrop: function (event, delta, revertFunc) {
            var id = event.id;
            var start = event.start.format();

            $.ajax({
                url: getURLRoot() + 'Diary/UpdateEventTimestamp',
                type: "POST",
                data: { id: id, start: start },
                success: function () {
                    $('#calendar').fullCalendar('refetchEvents');
                }
            });
        }

Answer 8

如果您在 ajax 成功函數中調用 refetchevents，它將無法工作，因為我相信它是異步的。 但是你可以做的是在ajax完整函數中調用refetchevents。

          $.ajax({
                    type: "POST",
                    url: "/TaxCalendar/CreateEvent",
                    data: JSON.stringify({ jdata: json }),
                    //data: jdata,
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function (events) {


                    }, complete: function () {
                        //Call Refetch function here.
                        $('#calendar').fullCalendar('refetchEvents');
                    }
                });