如何在使用 ajax 更改事件对象后刷新 fullcalendar v4

Question

我使用 fullcalendar v4 来显示事件。事件正常显示在加载中，但我需要使用多个复选框添加过滤器，并在使用 ajax 更改复选框后刷新全日历事件。

更改后我得到了新的对象事件，但我需要刷新全日历我尝试 calendar.render(); 但没有用

fullcalendar V4 !!

fullcalendar script

 var taskEvents = JSON.parse($("input[name=tasks_events]").val());
        var calendarEl = document.getElementById('tasks_calendar');
        var  calendar = new FullCalendar.Calendar(calendarEl, {
            locale: 'fr',
            plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek'
            },
            defaultDate: new Date(),
            defaultView: 'timeGridWeek',
            minTime: "09:00:00",
            maxTime: "20:00:00",
            weekends:false,
            businessHours: true, // display business hours
            editable: true,
            selectable: true,
            droppable: true,
            //events:taskEvents ,
            select: function(info) {
                $('#newTaskFormLabel').html('Commence à '+"<b> " + moment(info.startStr).format('DD-MM-YYYY HH:mm') + "</b> "+" fin à " +"<b> " + moment(info.endStr).format('DD-MM-YYYY HH:m:m')) +"</b>"
                $('#newTaskForm').modal('show');
                $('#newTaskForm input[name=start_at]').val(info.startStr);
                $('#newTaskForm input[name=end_at]').val(info.endStr);
            },
            eventClick: function(info) {
                $('#editTaskForm').modal('show');
                console.log(info);
                editTask(info.event);
            },
            // dateClick: function(info) {
            //     alert('clicked ' + info.dateStr);
            // },
            eventResize: function(info) {    
                $('.popover.in').remove();     
                if (confirm("Êtes-vous sûr de vouloir appliquer ces modifications?")) {
                    submitTimeChanges(info.event);
                }else{
                    info.revert();
                }
            },   
            eventDrop : function(info){
                $('.popover.in').remove(); 
                // $(info.el).removeAttr('aria-describedby');
                if (confirm("Êtes-vous sûr de vouloir appliquer ces modifications?")) {
                    submitTimeChanges(info.event);
                }else{
                    info.revert();
                }
            },
            eventRender: function(info) {

                $(info.el).append('<img src="'+document.location.origin+'/'+info.event.extendedProps.user_avatar+'" class="img-circle event-avatar" alt="User Image">');
                let state = function (state) { 
                    if(state =="not_started") return "Pas encore commencé";
                    if(state =="started") return "Commencé";
                    if(state =="finish") return "Terminer";
                }
                $(info.el).popover({
                    title: info.event.title,
                    content: function () {
                        let html ="<p>"+moment(info.event.start).format('DD-MM-YYYY HH:mm')+' / '+moment(info.event.end).format('DD-MM-YYYY HH:mm')+"</P>"
                        +"<p>"+info.event.extendedProps.description+"</p>"
                        +"<p>"+"Utilisateur : "+info.event.extendedProps.user+"</p>"
                        +"<p>"+"Projet : "+info.event.extendedProps.project+"</p>"
                        +"<p>"+"Fonction : "+info.event.extendedProps.activity+"</p>"
                        +"<a class='btn btn-primary btn-xs'>"+state(info.event.extendedProps.state)+"</a>";
                        return html;
                    },
                    trigger: 'hover',
                    placement: 'top',
                    html: 'true',
                    container: 'body'
                    });
            },

        });
        calendar.addEventSource( taskEvents );
        calendar.render();
//--------------------------------------------------------

ajax script

var getTasks = function (data){
            $.ajax({
                url:"/admin/get-users-tasks",
                type:"POST",
                data :{
                    users:data,
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (response) {
                    calendar.addEventSource( response );
                    calendar.refetchEvents();
                },
                error: function(response) {
                    new PNotify({
                        title: "Opération échoué",
                        text: response.message,
                        type: "error"
                      });
                }
              });
        }

on change checkbox function

 function onChangeUserCheckbox() {  
        $("input[name*=selected_user]").on('change',function () {
            var selectedUsers = [];
            $.each($("input[name*='selected_user']:checked"), function(){            
                selectedUsers.push($(this).val());
            });
            getTasks(selectedUsers);
            // getTasks(JSON.stringify(selectedUsers));
        })
    }

Answer 1

请检查以下代码：

 $.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"
              });
        }
      });

Answer 2

你没有准确解释你的代码出了什么问题，但我可以看到，当你从 AJAX 调用中得到响应时，你每次都添加了一个新的事件源。我还可以看到您从未删除任何以前的事件源，因此您只会不断收到越来越多的事件。我假设这就是您要问的问题。

但是，与其始终 adding/removing 个事件源，不如将其声明为可以刷新和更新的单个事件源会更简单。您将使用 here in the documentation 描述的 "events-as-a-function" 模式来声明此来源。

下面是一些修改后的代码，它会更有意义：

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 请求并尝试获取事件。但是，由于没有选中任何复选框，因此不会将任何数据传递到服务器。我不知道您的服务器代码当前在那种情况下做了什么，或者您希望它做什么。我想它应该 return 所有可能的事件，或者根本 none。无论哪种方式，您都需要确保服务器代码已设置为处理这种情况，并且 return 任何有意义的数据。

2) 我在这里也添加了您的另一组事件（取自您的隐藏字段）作为事件源。无需通过 "addEventSource" 单独添加它，因为您会在加载日历时立即添加它 - 您只需在选项中声明即可。

3) 我没有在这里使用提供的 fetchInfo 数据，但理想情况下，您应该从该对象获取开始和结束日期值并将它们作为参数发送到您的服务器，并且您的服务器应该使用它们来过滤数据，并且仅过滤开始日期介于这两个日期之间的 return 个事件。这会更有效率，因为这样你就只会 return 实际显示在日历上的数据，而不是用户曾经拥有的所有任务 - 如果你考虑一下，一旦你的应用程序被在使用几个月后，他们会开始有很多过去的数据，每次下载这些数据是没有意义的，因为几乎肯定不会被查看。（请注意，如果用户确实导航到 past/future 日期并且 fullCalendar 没有这些日期的事件数据，它将运行再次调用 AJAX 并要求服务器提供它.但如果用户从不查看那些日期，它就不会打扰，并且您可以节省一些带宽和处理时间。)

有关在日历选项中配置事件源的文档，请参阅 https://fullcalendar.io/docs/eventSources。

Answer 3

我所做的：销毁日历并重新渲染它

不要按照文档中的指示加载日历，但是：

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

然后加载：

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

最后，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);
        }
    }

Answer 4

完整日历 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 更改事件对象后刷新 fullcalendar v4

how to refresh fullcalendar v4 after change events object using ajax

javascript

jquery

ajax

fullcalendar

fullcalendar-4