您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

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

其他 2022/1/1 18:15:09 有568人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶