如何使用ajax更改事件对象后刷新fullcalendar v4
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用ajax更改事件对象后刷新fullcalendar v4相关的知识，希望对你有一定的参考价值。
我使用fullcalendar v4来显示事件。事件通常在加载中显示，但我需要使用多个复选框添加过滤器，并在onchange复选框后使用ajax刷新fullcalendar事件。
更改后，我得到新的对象事件，但我需要刷新fullcalendar我尝试与calendar.render();但不工作
fullcalendar V4 !!
fullcalendar脚本
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脚本
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调用获得响应时，每次都会添加一个新的事件源。我也可以看到你永远不会删除任何以前的事件源，所以你会不断收到越来越多的事件。我会假设这是你问的问题。
但是，不是一直添加/删除事件源，而是将其声明为可以刷新和更新的单个事件源更简单。您将使用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请求并尝试获取事件。但是，由于未选中任何复选框，因此不会将任何数据传递给服务器。我不知道您的服务器代码目前在这种情况下做了什么，或者您希望它做什么。我想它应该返回所有可能的事件，或者根本不返回任何事件。无论哪种方式，您都需要确保设置服务器代码以处理这种情况并返回任何有意义的数据。
2）我在这里添加了你的另一组事件（取自你的隐藏字段）作为事件源。没有必要通过“addEventSource”单独添加它，因为您在日历加载时立即添加它 - 您可以在选项中声明它。
3）我没有在这里使用提供的fetchInfo数据，但理想情况下，您应该从该对象获取开始和结束日期值并将它们作为参数发送到您的服务器，并且您的服务器应该使用它们来过滤数据并且仅返回其开始日期介于这两个日期之间的事件。这将更有效率，因为那样你只会返回实际将要显示在日历上的数据，而不是用户曾经拥有的所有任务 - 如果你想到它，一旦你的应用程序被用于几个月后，他们将开始拥有大量过去的数据，每次下载都没有意义，因为几乎可以肯定它不会被查看。 （注意，如果用户确实导航到过去/未来日期并且fullCalendar没有这些日期的事件数据，它将再次运行AJAX调用并要求服务器提供它。但是如果用户从不查看这些日期，它不会打扰，你节省了一些带宽和处理时间。）
有关在日历选项中配置事件源的文档，请参阅https://fullcalendar.io/docs/eventSources。
另一答案
我做了什么：破坏日历并重新渲染它
- 不按文档中的说明加载日历，但是：
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更新： qazxsw poi
另一答案
请检查以下代码：
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);
}
}以上是关于如何使用ajax更改事件对象后刷新fullcalendar v4的主要内容，如果未能解决你的问题，请参考以下文章