I use fullcalendar to save some event on db, but after some tests i have made i saw a strange problem. Also is use bootstrap modal and axios from vue to make request on laravel. So the problem is, for example when i click on date 5 and i remove modal does not add any data there, and after i close this modal i will reopen new modal on date 8 without reloading windows and on date 8 i want to save some data, when i save for date 8 the event created twic, one for date 8 witch is event i want and one for date 5 witch is event i just clicked and open modal without saving data before. How can i fix this
//Modal is a bit longer so i will pass only fullcalendar function and data
import axios from 'axios'
import '@fullcalendar/core/vdom' // solves problem with Vite
import 'bootstrap-icons/font/bootstrap-icons.css';
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import listPlugin from '@fullcalendar/list'
import interactionPlugin from '@fullcalendar/interaction'
import bootstrap5Plugin from '@fullcalendar/bootstrap5'
export default {
components: {
FullCalendar
},
data() {
return {
...
calendarOptions: {
plugins: [
dayGridPlugin,
interactionPlugin,
timeGridPlugin,
listPlugin,
bootstrap5Plugin
],
height: 650,
eventColor: '#695CFE',
initialView: 'dayGridMonth',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
dateClick: this.handleDateClick,
navLinks: true,
dayMaxEvents: true,
editable: false,
selectable: true,
weekends: false,
droppable: false,
allDay: true,
themeSystem: 'bootstrap5',
select: this.selectEventFunction,
eventSources: [
{
events: function(fetchInfo, successCallback, failureCallback) {
axios.get('/getDatas').then(response => {
successCallback(response.data.data)
// console.log(response.data.data)
});
}
}
],
eventClick: this.removeEventfromCalendar,
},
}
},
mounted() {
// Ajax X-CSRF-TOKEN
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
},
methods: {
selectEventFunction(selectionInfo) {
$('#createEvent').off("click"); // Added off click there
$('#addEventCalendar').modal('toggle');
$('#createEvent').click(function () {
var client_name = $('#chose_client').val();
if (!client_name) {
var client_name = $('#client_name').val();
}
// console.log(client_name)
var job_name = $('#job_name').val();
var start_date = $('#eventStart').val();
var end_date = $('#eventEnd').val();
var template_name = $('#job_template').val();
var job_type = $('#job_type').val();
var job_description = $('#team_description').val();
var duration = $('#jobDuration').val();
var team_name = $('#assigne_team').val();
var client_phone_number = $('#client_phone').val();
var subject_type = $('#subject_type').val();
var client_adress = $('#client_adress').val();
// console.log(client_name)
$.ajax({
url: "/jobs",
type: "POST",
dataType: 'json',
data: {
job_name,
start_date,
end_date,
template_name,
job_type,
job_description,
duration,
team_name,
client_name,
client_phone_number,
subject_type,
client_adress,
},
success: function(response)
{
// console.log(response)
Toastify({
text: response.success,
className: "info",
duration: 3000,
position: "right",
gravity: "top",
close: true,
stopOnFocus: true,
style: {
background: "#695CFE",
}
}).showToast();
location.reload()
},
error:function(error)
{
// console.log(error)
Toastify({
text: error.responseJSON.errors.title,
className: "info",
duration: 3000,
position: "right",
gravity: "top",
close: true,
stopOnFocus: true,
style: {
background: "#801427",
}
}).showToast();
},
});
});
},
//remove event from calendar
removeEventfromCalendar(info)
{
info.el.style.borderColor = 'red'; //change clicked elemet border color
var id = info.event.id;
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
axios.delete('/data/' id, {
params: {
'id': id
}
})
.catch(error => {
Toastify({
text: error.response.data.message,
className: "info",
duration: 3000,
position: "right",
gravity: "top",
close: true,
stopOnFocus: true,
style: {
background: "#801427",
}
}).showToast();
})
.then(response => {
Toastify({
text: response.data.success,
className: "info",
duration: 3000,
position: "right",
gravity: "top",
close: true,
stopOnFocus: true,
style: {
background: "#695CFE",
}
}).showToast();
location.reload()
})
}
})
}
// handleDateClick: function(arg) {
// alert('date click! ' arg.dateStr)
// },
},
}
CodePudding user response：
$('#createEvent').click(function () { is inside your selectEventFunction, so every time a selection is made and that callback runs, you're adding another "click" event handler to the same button. And you're not removing any of the previously-added ones from earlier selections. So then each time you click the button, all the attached event handlers will run.
So to resolve it you need to either move that handler outside the function, so it only runs once, or remove all previous event handlers on that button before adding a new one.