I can’t extend the appointment. Can someone please tell me what’s wrong?
document.addEventListener("DOMContentLoaded", function() {
const calendarEl = document.getElementById('calendar');
const calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'de',
initialView: 'dayGridMonth',
editable: true,
themeSystem: 'bootstrap4', // Theme System ändern: bootstrap3,bootstrap4,jquery-ui,standard
droppable: true,
eventDisplay: "block",
weekNumbers: true,
displayEventTime: true,
weekends: true,
displayEventEnd: true,
events: 'libs/termine.php?data=all',
eventDrop: function(event) {
$.ajax({
type: "get",
url: "libs/termine.php?data=move",
data: {
id: event.event._def.publicId, // Event id for DB
start:event.event.startStr, // Event start timestamp
end:event.event.endStr, // Event end timestamp
allDay:event.event.allDay // Event allDay Boolean
},
success: function(response){
toastr.success(response);
}
});
},
eventResize: function(event) {
$.ajax({
type: "get",
url: "libs/termine.php?data=move",
data: {
id: event.event._def.publicId, // Event id for DB
start:event.event.startStr, // Event start timestamp
end:event.event.endStr, // Event end timestamp
allDay:event.event.allDay // Event allDay Boolean
},
success: function(response){
toastr.success(response);
}
});
},
eventClick: function(info) {
$('#eventModal').modal('show');
$('#title').val(info.event.title);
$('#start').val(info.event.startStr);
$('#end').val(info.event.endStr);
$('#eventId').val(info.event.id);
$('#eventModalLabel').text('Termin bearbeiten');
$('#deleteEventBtn').show();
},
dateClick: function(info) {
// Crear nuevo evento al hacer clic en una fecha
$('#eventModal').modal('show');
$('#eventForm')[0].reset();
$('#start').val(info.dateStr);
$('#end').val('');
$('#eventId').val('');
$('#eventModalLabel').text('Ereignis hinzufügen');
$('#deleteEventBtn').hide();
}
});
$('#eventForm').on('submit', function(e) {
e.preventDefault();
const eventData = {
title: $('#title').val(),
start: $('#start').val(),
end: $('#end').val(),
id: $('#eventId').val()
};
$.ajax({
url: eventData.id ? 'libs/termine.php?data=update' : 'libs/termine.php?data=add',
type: 'get',
dataType: 'json',
data: eventData,
eventDrop: function(event, delta){ // event drag and drop
$.ajax({
url: 'index.php',
data: 'action=update&title='+event.title+'&start='+moment(event.start).format()+'&end='+moment(event.end).format()+'&id='+event.id ,
type: "get",
success: function(json) {
toastr.success(response);
}
});
},
success: function(response) {
$('#eventModal').modal('hide');
calendar.refetchEvents();
toastr.success(response);
if (response && response.message) {
} else {
//alert("Error: respuesta no válida del servidor");
}
},
error: function() {
//alert("Error al guardar el evento.");
}
});
});
// Eliminar evento
$('#deleteEventBtn').on('click', function() {
const eventId = $('#eventId').val();
if (eventId) {
$.ajax({
url: 'libs/termine.php?data=delete',
type: 'GET',
dataType: 'json',
data: { id: eventId },
success: function(response) {
$('#eventModal').modal('hide');
calendar.refetchEvents();
toastr.success(response);
},
error: function() {
}
});
}
});
calendar.render();
});
I haven’t found the error yet, maybe one of you can see it. Please help and my english is very bad ;)I want to enlarge the event, but it’s not working. It works great in other examples, but I can’t find my mistake.
I’ve already looked through some examples but haven’t found the right approach.
That is my HTML code:
eventResize: function(event) {
$.ajax({
type: "get",
url: "libs/termine.php?data=move",
data: {
id: event.event._def.publicId, // Event id for DB
start:event.event.startStr, // Event start timestamp
end:event.event.endStr, // Event end timestamp
allDay:event.event.allDay // Event allDay Boolean
},
success: function(response){
toastr.success(response);
}
});
},
My problem is that I can’t extend the event, so I can’t make it last over several days. Postpone it, and everything’s fine.
