I have problem with my FullCalendar v6 and adding events to mysql database and refreshing page/events. If I add event, its correctly insert to database, but FullCalendar didnt load, and didnt display the event so I must push F5.
I have these code of FullCalendar:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'cs',
editable: true,
selectable: true,
selectLongPressDelay: 500,
unselectAuto: false,
select: function(info) {
var start = moment(info.start).format('YYYY-MM-DD HH:mm:ss');
var end = moment(info.end).format('YYYY-MM-DD HH:mm:ss');
$('#add-event-modal-visit #event_start').val(start);
$('#add-event-modal-visit #event_end').val(end);
$('#add-event-modal-visit').modal('show');
},
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridYear,dayGridMonth,timeGridWeek,timeGridDay'
},
views: {
timeGridWeek: {
titleFormat: {
year: 'numeric',
month: 'long',
},
dayHeaderFormat: { day: 'numeric', weekday: 'short' },
slotLabelFormat: { hour: 'numeric', minute: 'numeric' },
}
},
themeSystem: 'bootstrap5',
firstDay: 1,
initialView: 'timeGridWeek',
nowIndicator: true,
slotMinTime: '08:00:00',
slotMaxTime: '21:00:00',
editable: true,
selectable: true,
dayMaxEvents: true,
eventContent: function(arg) {
var startTime = calendar.formatDate(arg.event.start, {
hour: '2-digit',
minute: '2-digit'
});
var endTime = calendar.formatDate(arg.event.end, {
hour: '2-digit',
minute: '2-digit'
});
return { html: '<div class="fc-content">' +
'<div class="fc-time">' + startTime + ' - ' + endTime + '</div>' +
'<div class="fc-title"><b>' + arg.event.title + '</b></div>' +
'<div class="fc-description">' + arg.event.extendedProps.description + '</div>' +
'</div>' };
},
events: [
<?php
$query = "SELECT * FROM events ORDER BY id";
$result = mysqli_query($conn, $query);
while ($row = mysqli_fetch_array($result)) {
$id = $row['id'];
$title = $row['event_name'];
$start = $row['event_start'];
$end = $row['event_end'];
$eventColor = $row['event_color'];
$shortDescription = $row['event_short_description'];
?>
{
id: '<?php echo $id; ?>',
title: '<?php echo $title; ?>',
start: '<?php echo $start; ?>',
end: '<?php echo $end; ?>',
color: '<?php echo $eventColor; ?>',
extendedProps: {
description: '<?php echo $shortDescription; ?>'
}
},
<?php
}
?>
],
});
calendar.render();
});
After click on time in FullCalendar, modal is show, where I fill data, after click on Done in modal window, I call function:
<script>
$(document).ready(function() {
$('#add-event-modal-visit #add_event_visit').on('click', function() {
console.log("klik");
var event_name = $("#add-event-modal-visit #event_name").val();
var id_customer = $("#add-event-modal-visit #id_customer").val();
var id_service = $("#add-event-modal-visit #id_service").val();
var event_start = $("#add-event-modal-visit #event_start").val();
var event_end = $("#add-event-modal-visit #event_end").val();
var deposit = $("#add-event-modal-visit #deposit").val();
var event_description = $("#add-event-modal-visit #event_description").val();
var event_type = 'visit';
console.log(event_name);
console.log(id_customer);
console.log(id_service);
console.log(event_start);
console.log(event_end);
console.log(deposit);
console.log(event_description);
console.log(event_type);
$.ajax({
url: 'add_event/add_event_visit.php',
data: 'event_name=' + event_name +
'&id_customer=' + id_customer +
'&id_service=' + id_service +
'&event_start=' + event_start +
'&event_end=' + event_end +
'&deposit=' + deposit +
'&event_description=' + event_description +
'&event_type=' + event_type,
type: "POST",
success: function (json) {
console.log("ok");
$('#add-event-modal-visit').modal('hide');
//calendar.refetchEventsAndResources();
//calendar.render();
//calendar.refetchEvents();
//location.reload();
},
error: function () {
console.log("Chyba při ukládání události do databáze.");
},
dataType: 'json'
});
});
});
</script>
Everything in console.log is write of correctly, after that ajax call php.script - add_event_visit.php with this code:
<?php
require('../../include/connection.php');
$event_type = $_POST["event_type"];
$event_name = $_POST["event_name"];
$service_id = $_POST["id_service"];
$customer_id = $_POST["id_customer"];
$event_start = $_POST["event_start"];
$event_end = $_POST["event_end"];
$event_description = $_POST["event_description"];
$deposit = $_POST["deposit"];
$service_name = "
select
*
FROM
services
where id = '$service_id';
";
$mysql_query_service_name = mysqli_query($conn, $service_name);
$row_service = mysqli_fetch_array($mysql_query_service_name);
$event_short_description = $row_service['name'];
$event_color = "
select
*
FROM
event_colors
where id_item = '$service_id'
and type = '$event_type';
";
$mysql_query_event_color = mysqli_query($conn, $event_color);
$row_event_color = mysqli_fetch_array($mysql_query_event_color);
$event_color = $row_event_color['color'];
$sql = "INSERT INTO events(id, event_type, event_name, event_short_description, id_customer, id_service, event_start, event_end, event_color, event_description, deposit)
VALUES (DEFAULT,'$event_type','$event_name','$event_short_description','$customer_id','$service_id','$event_start','$event_end','$event_color','$event_description','$deposit')";
if (mysqli_query($conn, $sql)) {
$response = array('status' => 'success', 'message' => 'Data byla úspěšně aktualizována.');
} else {
$response = array('status' => 'error', 'message' => 'Chyba při aktualizaci dat v databázi.');
}
header('Content-Type: application/json');
echo json_encode($response);
?>
The event is saved to database, but after close modal window, event wont show in FullCalendar, I must push F5 for refresh page. I tried: calendar.refetchEventsAndResources(); calendar.render();calendar.refetchEvents();. Everything not working. If i used location.reload() that reload page, so if I adding event for example with May date, that jumped back on actual week.
