how to refresh fullcalendar v4 after change events object using ajax
i use fullcalendar v4 to show events. events shows in load normally ,but i need to add a filter using multiple checkboxes and refresh fullcalendar events after onchange checkbox with ajax .
after change i get the new object events but i need to refresh fullcalendar
i try with calendar.render(); but not working
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
You haven't explained precisely what is going wrong with your code, but I can see that when you get the response from the AJAX call, you add a new event source each time. I can also see that you never remove any previous event source though, so you will just keep getting more and more events. I'm going to assume this is the problem you're asking about.
But, rather than adding/removing event sources all the time, it would be simpler to declare this as a single event source which can be refreshed and updated. You would use the "events-as-a-function" pattern described here in the documentation to declare this source.
Here's some revised code which would make a bit more sense:
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
}
});
}
Some notes:
1) In this version, when the calendar loads it will immediately make an AJAX request to the server and try to get events. However since no checkboxes are selected, no data will be passed to the server. I don't know what your server code currently does in that situation, or what you want it to do. I guess it should either return all the possible events, or none at all. Either way you need to make sure the server code is set up to handle this situation and return whatever data makes sense.
2) I've added your other set of events (taken from your hidden field) as an event source in here as well. There's no need to add it separately via "addEventSource", since you're adding it immediately when the calendar loads - you can just declare it in the options instead.
3) I haven't used the provided fetchInfo data here, but ideally you should be taking the start and end date values from that object and sending them to your server as parameters, and your server should be using them to filter the data and only return events whose start dates fall between those two dates. This will be more efficient, because then you'll only return data which is actually going to be displayed on the calendar, rather than all tasks the user has ever had - if you think about it, once your application has been in use for a few months, they will start to have a lot of past data, which there is no point in downloading every time, as almost certainly it will not be viewed. (Note that, if the user does navigate to past/future dates and fullCalendar doesn't have event data for those dates, it will run the AJAX call again and ask the server to provide it. But if the user never views those dates, it won't bother, and you save some bandwidth and processing time.)
See https://fullcalendar.io/docs/eventSources for documentation about configuring Event Sources in the calendar options.