FullCalendar problem (you could help without knowledge of FullCalendar)

I have a calendar with FullCalendar, I want to remove some time slots (it works) but the problem is that if I have events after this time slot, when I render the calendar, due to the fact that the event is related with the column in the DOM instead of the row, it gets the initial position of the slot. Business hours just paints the calendar, but the slots will show. If I press F12 or I resize the window it fits on the new position, but it doesn´t work with resizeTo() or anything in JS. Any idea?

<div id="calendar"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script>
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'timeGridWeek',
        slotDuration: '00:30:00',
    });

    let newEvent = {
        title: 'Nuevo evento',
        start: '2023-04-20T09:00:00',
        end: '2023-04-20T10:00:00',
        allDay: false
    };

    let newEvent2 = {
        title: 'Nuevo evento 2',
        start: '2023-04-20T14:00:00',
        end: '2023-04-20T15:00:00',
        allDay: false
    }

    calendar.render()
    document.querySelector('[data-time="11:00:00"]').parentElement.style.display = "none";
    var el = document.querySelector('[data-time="11:30:00"]');
    el.parentElement.style.display = "none" //Tryied .remove()
    calendar.addEvent(newEvent);
    calendar.addEvent(newEvent2);
</script>

I tried to get the slots hidden and the events repositioned, but events won’t reposition