After 3hours of searching, I couldn't find the answer to my problem.
I've created a fullcalendar V3 an now i'm updating to V5. I thought it will be easy but, no, its not easy at all for my actual level. (i've started to code at 4 months, i'm a really rookie).
So, the code that works:
<head>
<script>
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
locale: 'fr',
defaultView: 'listWeek',
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
events: 'load.php',
eventColor: 'red',
selectable: true,
selectHelper: true,
//try to make data request from input
//see documents in Montauban/Calendar and try to modify this lignes
select: function(start, end, allDay) {
var title = prompt("Entrez l'evenement");
if (title) {
var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: "insert.php",
type: "POST",
data: {
title: title,
start: start,
end: end
},
success: function() {
calendar.fullCalendar('refetchEvents');
alert("Evenement créé avec succès");
}
})
}
},
editable: true,
eventResize: function(event) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var id = event.id;
$.ajax({
url: "update.php",
type: "POST",
data: {
title: title,
start: start,
end: end,
id: id
},
success: function() {
calendar.fullCalendar('refetchEvents');
alert('Evenement mis a jour');
}
})
},
eventDrop: function(event) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var id = event.id;
$.ajax({
url: "update.php",
type: "POST",
data: {
title: title,
start: start,
end: end,
id: id
},
success: function() {
calendar.fullCalendar('refetchEvents');
alert("Evenement mis a jour");
}
});
},
eventClick: function(event) {
if (confirm("Êtes-sur sûr de vouloir supprimer?")) {
var id = event.id;
$.ajax({
url: "delete.php",
type: "POST",
data: {
id: id
},
success: function() {
calendar.fullCalendar('refetchEvents');
alert("Evenement supprimé");
}
})
}
},
});
});
</script>
</head>
And the code that do not work with the follows errors:
Uncaught TypeError: Cannot read property 'nodeName' of null
Uncaught TypeError: calendar.FullCalendar is not a function at Object.success ((index):106) at c (jquery.min.js:2)at Object.fireWith [as resolveWith] (jquery.min.js:2)at l (jquery.min.js:2)at XMLHttpRequest. (jquery.min.js:2)
<head>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
locale: 'fr',
editable: true,
themeSystem: 'bootstrap',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
events: 'load.php',
eventColor: 'red',
selectable: true,
editable: true,
eventResize: function(event) {
var start = FullCalendar.formatDate(event.start, {
month: "long",
year: "numeric",
day: 'numeric',
locale: 'fr',
});
var end = FullCalendar.formatDate(event.end, {
month: "long",
year: "numeric",
day: 'numeric',
locale: 'fr',
});
var title = event.title;
var id = event.id;
console.log('hey')
$.ajax({
url: "update.php",
type: "POST",
data: {
title: title,
start: start,
end: end,
id: id
},
success: function() {
calendar.FullCalendar('refetchEvents');
alert('Evenement mis a jour');
}
})
},
eventDrop: function(event) {
var start = FullCalendar.formatDate(event.start, {
month: "long",
year: "numeric",
day: 'numeric',
locale: 'fr',
});
var end = FullCalendar.formatDate(event.end, {
month: "long",
year: "numeric",
day: 'numeric',
locale: 'fr',
});
var title = event.title;
var id = event.id;
$.ajax({
url: "update.php",
type: "POST",
data: {
title: title,
start: start,
end: end,
id: id
},
success: function() {
calendar.FullCalendar('refetchEvents');
alert("Evenement mis a jour");
}
});
},
eventClick: function(event) {
if (confirm("Êtes-sur sûr de vouloir supprimer?")) {
var id = event.id;
$.ajax({
url: "delete.php",
type: "POST",
data: {
id: id
},
success: function() {
calendar.FullCalendar('refetchEvents');
alert("Evenement supprimé");
}
})
}
},
});
calendar.render();
});
</script>
</head>
In the first example (fulcalendar V3) everything works and the database its update when we "drop events, delete events". In the second example (fullcalendar V5), we can click and drop in the events, but the data base its not updated with the new info.
Can you please try to help me?
Sorry for my bad English. :)
