Повторная передача событий в fullCalendar после обновления базы данных Ajax

Я пытаюсь, чтобы fullCalendar отражал изменения, внесенные в базу данных через AJAX. Проблема заключается в том, что после успешного вызова AJAX он не будет обновлять календарь на экране.

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

Я использую неправильный метод? Какой был бы лучший способ выполнить это, не перезагружая всю страницу? Спасибо за любой вклад!

Ответ 1

Существует несколько способов. Некоторые менее элегантные.

1. Если вы используете FullCalendar для захвата событий json:

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

Просто выполните:

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

Если вы хотите, чтобы внешний метод выбирал события, которые вы могли бы сделать. Не элегантный, но будет работать

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

Ответ 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' );
       }.
     });

Ответ 3

Это то, что работает в ASP.NET CORE, MVC 6:

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

пока он работал в ASP.NET MVC 5:

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

Ответ 4

Что работает для меня:

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

Если я делаю это напрямую без таймаута, это не работает, вероятно из-за того, что переменная $element.fullCalendar еще не установлена полностью?

Ответ 5

Для 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

Ответ 6

Одна строка делает работу:

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

Поздний ответ, но это должен быть самый эффективный способ, начиная с 2.8.0

Ответ 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');
                }
            });
        }