fullcalendar.js, не может перемещаться по периодам

Question

Я впервые использую fullcalendar.js, успешно его реализовал, мне удалось получить и отобразить мои события, и сейчас я работаю над дизайном своего календаря.

Однако мой календарь начал работать странно, и теперь, например, я не могу переходить через недели после загрузки своей страницы, единственный способ, которым я могу, это изменить представление календаря, щелкнув представление месяца или дня кнопку, тогда я смогу перемещаться и вернуться к просмотру недели, чтобы перемещаться по неделям. Это происходит независимо от представления по умолчанию (если это представление по месяцам, я не смогу перейти к следующим или предыдущим месяцам, не изменив сначала выбранное представление), даты в заголовке изменятся, а содержимое - нет.

Поскольку это работало ранее, я попытался перезапустить с более простым кодом (я попытался инициализировать свой календарь только с лицензионным ключом, и поскольку я работал над дизайном, я удалил все CSS), я не получаю ошибку в консоль браузера, которую я пробовал как с Firefox, так и с Chrome, я также стер кеш браузера, но ничего не улучшилось.

Я совершенно уверен, что нет никакого отношения к моему вызову ajax (раньше он работал нормально, теперь не работает даже без него), поэтому я не предоставляю свой код контроллера.

Я использую fullcalendar.3.9.0.

Вот мой js (не в $ (document) .ready (), но я пытался, и он ничего не изменил):

    $('#calendar').fullCalendar({
        schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
        themeSystem: 'bootstrap4',
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'agendaDay,agendaWeek,month'
        },
        bootstrapFontAwesome: {
            close: 'fa-times',
            prev: 'fa-chevron-left',
            next: 'fa-chevron-right',
            prevYear: 'fa-angle-double-left',
            nextYear: 'fa-angle-double-right'
        },
        defaultView: 'agendaWeek',
        firstDay: 1,
        allDaySlot: false,
        editable: false,
        droppable: false,
        columnFormat: 'ddd DD/MM',
        timeFormat: 'HH:mm',
        nowIndicator: true,
        events: function (start, end, timezone, callback) {
            Post('/Incident/GetInterventionList',
                {
                    start: start.format('YYYY-MM-DD'),
                    end: end.format('YYYY-MM-DD')
                },
                function (response) {
                    var events = [];

                    for (var i = 0; i < response.length; i++) {
                        let e = response[i];
                        events.push({
                            id: e.ActivityId,
                            title: e.SANumber + " | " + e.Subject,
                            start: moment(e.MorningStart ? e.MorningStart : e.EveningStart).toISOString(),
                            end: moment(e.EveningEnd ? e.EveningEnd : e.MorningEnd).toISOString(),
                            color: (e.StateCode == 0 ? '#ffc107' : (e.StateCode == 1 ? '#28a745' : (e.StateCode == 3 ? '#dc3545' : '#007bff')))
                        });
                    }

                    callback(events);
                });
        }
    });

А вот мой css (я использую bootstrap.sass):

table {
    /*overflow: hidden;*/ /* blocks event display in fullCalendar */
    border: none !important;
    border-radius: 0.25rem !important;
}

table td, th {
    border: none !important;
}

table thead {
    border-radius: 0.25rem 0.25rem 0 0 !important;
}

table thead th:first-child, table thead th:first-child {
    overflow: hidden;
    border-radius: 0.25rem 0 0 0 !important;
}

table thead th:last-child, table thead th:last-child {
    overflow: hidden;
    border-radius: 0 0.25rem 0 0 !important;
}

table tfoot {
    border-radius: 0 0 0.25rem 0.25rem !important;
}

table tfoot td {
    min-height: 9px;
}

table tfoot tr:last-child td:first-child {
    overflow: hidden;
    border-radius: 0 0 0 0.25rem !important;
}

table tfoot tr:last-child td:last-child {
    overflow: hidden;
    border-radius: 0 0 0.25rem 0 !important;
}

.fc-scroller {
    max-height: 60vh;
    height: 60vh !important;
}

#calendar .btn {
    margin:3px;
}

.fc-event {
    box-shadow: 0px 1px 4px black;
}

table table {
    box-shadow: none !important;
    border: none !important;
}

table tfoot td {
    height: 9px;
}

.fc-row {
    border: none !important;
}

Спасибо за чтение, помощь будет очень признательна.

Answer 1

Надеюсь, это может помочь, проблема не в коде, представленном здесь, на самом деле в моем коде что-то тихо мешало fullCalendar (как предложено @ADyson, см. Комментарии), я модифицировал основную таблицу fullCalendar (динамически добавляя<tfoot> тег) после загрузки страницы, и это было источником проблемы.