как обновить fullcalendar v4 после изменения объекта событий с помощью ajax

Вы не объяснили, что именно не так с вашим кодом, но я вижу, что когда вы получаете ответ от вызова AJAX, вы каждый раз добавляете новый источник событий. Я также вижу, что вы никогда не удаляете какой-либо предыдущий источник событий, поэтому вы будете получать все больше и больше событий. Я предполагаю, что это проблема, о которой вы спрашиваете.

Но вместо того, чтобы постоянно добавлять / удалять источники событий, было бы проще объявить это как единый источник событий, который можно обновлять и обновлять. Чтобы заявить об этом источнике.

Вот немного исправленного кода, который будет иметь немного больше смысла:

var calendarEl = document.getElementById('tasks_calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
  eventSources: [
    JSON.parse($("input[name=tasks_events]").val()), //static event source
    getTasks //pass a reference to a function, so we have a dynamic, updateable event source
  ]
  ///....all your other options go here as well....
});

$("input[name*=selected_user]").on('change',function () {
  calendar.refetchEvents(); //this will automatically cause the "getTasks" function to run, because it's associated with an event source in the calendar
});

var getTasks = function(fetchInfo, successCallback, failureCallback) { //the input parameters are the ones shown in the fullCalendar documentation
  //find the currently selected users
  var selectedUsers = [];
  $.each($("input[name*='selected_user']:checked"), function(){            
    selectedUsers.push($(this).val());
  });

  //run the ajax call
  $.ajax({
    url: "/admin/get-users-tasks",
    type: "POST",
    data: {
      users: selectedUsers,
    },
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    success: function (response) {
      successCallback(response); //pass the event data to fullCalendar via the provided callback function
    },
    error: function(response) {
      new PNotify({
        title: "Opération échoué",
        text: response.message,
        type: "error"
      });

      failureCallback(response); //inform fullCalendar of the error via the provided callback function
    }
  });
}

Некоторые примечания:

1) В этой версии при загрузке календаря он немедленно отправляет запрос AJAX на сервер и пытается получить события. Однако, поскольку флажки не установлены, данные на сервер не передаются. Я не знаю, что в данный момент делает ваш серверный код в этой ситуации или что вы от него хотите. Я думаю, он должен либо вернуть все возможные события, либо вообще не вернуть. В любом случае вам нужно убедиться, что код сервера настроен для обработки этой ситуации и возврата тех данных, которые имеют смысл.

2) Я также добавил сюда другой набор событий (взятых из скрытого поля) в качестве источника событий. Нет необходимости добавлять его отдельно через addEventSource, так как вы добавляете его сразу после загрузки календаря - вместо этого вы можете просто объявить его в параметрах.

3) Я не использовал здесь предоставленные fetchInfo данные, но в идеале вы должны брать значения даты начала и окончания из этого объекта и отправлять их на свой сервер в качестве параметров, и ваш сервер должен использовать их для фильтрации данных и только возвращать события, даты начала которых попадают между этими двумя датами. Это будет более эффективно, потому что тогда вы будете возвращать только данные, которые фактически будут отображаться в календаре, а не все задачи, которые когда-либо выполнялись пользователем - если вы думаете об этом, когда ваше приложение использовалось для Через несколько месяцев у них начнется много прошлых данных, которые нет смысла загружать каждый раз, так как они почти наверняка не будут просматриваться. (Обратите внимание, что если пользователь переходит к прошлым / будущим датам, а fullCalendar не имеет данных о событиях для этих дат, он снова запустит вызов AJAX и попросит сервер предоставить его. Но если пользователь никогда не просматривает эти даты, это не будет беспокоить, и вы сэкономите часть полосы пропускания и время обработки.)

Документацию по настройке источников событий в параметрах календаря см. https://fullcalendar.io/docs/eventSources. .

Что я делаю: уничтожаю календарь и заново его визуализирую

1. не загружайте календарь, как указано в документе, но:

function LoadCalendar() {
        if (typeof calendar != "undefined") {
            document.getElementById("calendar").innerHTML = "";
        }
        var calendarEl = document.getElementById('calendar');
        calendar = new FullCalendar.Calendar(calendarEl, {
        //... parameters
        });
        calendar.render();
    }

2. Затем при загрузке:

function FirstCalendar() {
        MesEvents = "$events"; // Ajax script is executed and give $events
        LoadCalendar();
    }
        document.addEventListener('DOMContentLoaded', FirstCalendar);

3. И, наконец, для обновления Ajax:

function makeRequest(event) {
        //... ajax instructions
        httpRequest.onreadystatechange = function() { changeContents(httpRequest); };
        httpRequest.open('POST', 'url/ajax.php', true);
        httpRequest.send(oData);
    }
    function changeContents(httpRequest) {
        try {
            if (httpRequest.readyState == XMLHttpRequest.DONE) {
                if (httpRequest.status == 200) {
                    reponse = JSON.parse(httpRequest.responseText);
                    MesEvents = JSON.parse(reponse.Events);
                    LoadCalendar();
                } else {
                    alert('Un problème est survenu avec la requête : ' + httpRequest.status);
                }
            }
        }
        catch( e ) {
            alert(\"Une exception s’est produite (changeContents) : \" + e.description);
        }
    }

Полный календарь v4

Во-первых, я хотел бы поблагодарить ADyson и Boutamente за ответы. это помогло мне найти решение. Мой код выглядит следующим образом:

<script>

  document.addEventListener('DOMContentLoaded', function() {

    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {

    plugins: [ 'dayGrid','interaction','googleCalendar' ],
    editable: true,
    selectable: true,

    dateClick: function(info) {

      // open a modal form and submit using ajax

    },

    // eventClick is not required if you are using eventRender with bootstrap tooltip or popover. However it is up to you.

    // eventClick: function(info) {

    //   alert('Event: '+titleCase(info.event.title)+'\n'+'Start: '+info.event.start.toDateString()+' '+info.event.start.toLocaleTimeString()+'\n'+'End: '+info.event.end.toDateString()+' '+info.event.end.toLocaleTimeString());

    // },

    // there is no need to set a static event source if you are
    // fetching events using custom function
    // eventSources allow you to fetch events using fn,json,array

    eventSources: [
      {
        // FullCalendar will call this function whenever it needs new data
        // fetchInfo is auto populated with start and end dates of calendar
        // I manipulate the start and end data in my controller to search the db
        // for more info on fetchInfo Object, https://fullcalendar.io/docs/events-function
        // base_url() is a custom function

        events:function(fetchInfo, successCallback, failureCallback) {

          $.ajax({
            type:'GET',
            url: base_url() + "/fetchInfo",
            data:{"start":fetchInfo.start.toDateString(),"end":fetchInfo.end.toDateString()},
            success: function(response) {

              successCallback(response.dates.map(function(event) {

                return {
                  id:event.id,
                  title:event.title,
                  start:event.start,
                  end:event.end,
                }

              })
              );
            },
            error: function(response){
              console.log(response);
              failureCallback(response);
            },
          }); 
        },
        color: 'yellow',
      }
    ],

    eventDrop: function(info) {

        if(!confirm("Are you sure about this change?")) {
          info.revert();
        }
        // call function to update event date with ajax
        modifyEvent(info.event);

    },

    eventRender: function(info) {

      $(info.el).popover(
        {
          title:titleCase(info.event.title),
          content:multiline('Start: ' + info.event.start.toDateString() + ' ' + info.event.start.toLocaleTimeString() + '\n' + 'End: ' + info.event.end.toDateString() + ' ' + info.event.end.toLocaleTimeString()),
          html:true,
          trigger:'hover',
          container:'body',
          placement:'top',
        });
    },

  });

  // refetch events once you close the modal form

  $('#createEventModal').on('hidden.bs.modal', function() {

      calendar.refetchEvents();

  });

  calendar.render();

  });


</script>

Пожалуйста, проверьте код ниже:

 $.ajax({
        url:"/admin/get-users-tasks/"+data,
        type:"GET",
        success: function (response) {
            calendar.addEventSource( '/admin/get-users-tasks/'+data );
            var eventSource = calendar.getEventSources();
            eventSource[0].remove();
            eventSource[0].refetch();
        },
        error: function(response) {
            new PNotify({
                title: "Opération échoué",
                text: response.message,
                type: "error"
              });
        }
      });