I have a problem with the events. I can't enlarge them. (resize)

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.

Answer

Because your calendar only allows use of the "month" view, which is not aware of times (it only knows about whole days) you will not be able to resize any events which are less than 1 day in duration.

This is because it isn't possible for the calendar to know what the new end time of the event should be, when the grid you're dragging it on has no time markers.

A solution to this is to also allow the user to view the data using a time-aware view such as timeGridWeek or similar.