栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何使用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。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/398125.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号