如何使用Ajax在更改事件对象后刷新Fullcalendar v4

白彦

2023-03-14

问题内容：

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

更改后，我得到了新的对象事件，但我需要刷新我尝试使用的fullcalendar，calendar.render();但无法正常工作

fullcalendar V4 !!

全日历脚本

 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();
//--------------------------------------------------------

阿贾克斯脚本

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

更改时复选框功能

 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));
        })
    }

问题答案：

您没有确切解释代码出了什么问题，但是我可以看到，当您从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。

如何使用Ajax在更改事件对象后刷新Fullcalendar v4

相关阅读

相关文章

相关问答

相关工具

相关文档