перезагрузить данные api на кнопках «следующий / предыдущий» в fullcalendar v4 - PullRequest
Новая
       38

перезагрузить данные api на кнопках «следующий / предыдущий» в fullcalendar v4

0 голосов
/ 18 июня 2020

Я пытаюсь получить данные json из API на кнопках next / prev со следующим кодом, но он не работает во второй раз, когда мы нажимаем кнопку, мой код выглядит следующим образом 

var calendarEl = document.getElementById('calendar');
        $scope.calendarObj = new FullCalendar.Calendar(calendarEl, {
            plugins: [ 'interaction', 'dayGrid', 'timeGrid','interactionPlugin' ],
            header: {
                left: 'prev,next, today',
                center: 'title',
                right: 'timeGridDay,timeGridWeek,dayGridMonth'
            },
            // defaultDate: '2020-06-18', if null, it will fetch current day.
            nextDayThreshold: '00:00:00',
            slotDuration: '00:15:00',
            defaultView: 'timeGridDay',
            lazyFetching : false,
            navLinks: true, // can click day/week names to navigate views
            selectable: true,
            selectMirror: true,
            select: function(arg) {
                var title = prompt('Event Title:');
                if (title) {
                    $scope.calendarObj.addEvent({
                        title: title,
                        start: arg.start,
                        end: arg.end,
                        allDay: arg.allDay
                    })
                }
                $scope.calendarObj.unselect()
            },
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: function(start, end, callback) {
                fetchEventsByDate(start.start,start.end) //  used to call json api and fetch the data
            },
            dateClick: onEmptySlotClick,
        });
        $scope.calendarObj.render();

В методе fetchEventsByDate я вызвал следующий метод для отображения данных в календаре. 

$scope.refresh_events = function () {
    var eventSources = $scope.calendarObj.getEventSources();
    var len = eventSources.length;
    for (var i = 0; i < len; i++) {
        console.log(eventSources[i])
        eventSources[i].remove();
    }
    $scope.calendarObj.addEventSource( $scope.events );
    $scope.calendarObj.render();
};

, но он не работает. может, пожалуйста, кто-нибудь направит меня, где я делаю это неправильно.

1 Ответ

0 голосов
/ 18 июня 2020

В вашем общем подходе есть несколько ошибок:

  1. events: function(start, end, callback) неверно. Это была сигнатура функции в fullCalendar 3. В fullcalendar 4 это function( fetchInfo, successCallback, failureCallback ). Это очень ясно из документации . Если вы копируете примеры из других источников, убедитесь, что они применимы к правильной версии.

  2. Идея функции «события как функция» состоит в использовании предоставленного обратного вызова для возврата событий в fullCalendar. Его не следует использовать для добавления и удаления новых источников событий. Это очень неэффективно по сравнению с простым возвратом данных о событии напрямую в fullCalendar. Ваш метод fetchEventsByDate должен возвращать только что полученный массив данных события, чтобы его можно было использовать для предоставления обратного вызова.

Ваша функция событий будет выглядеть так: 

events: function( fetchInfo, successCallback, failureCallback ) {
  successCallback(fetchEventsByDate(fetchInfo.start,fetchInfo.end)); //  used to call json api and fetch the data
}

PS, если данные извлекаются из API асинхронно, тогда может потребоваться, чтобы fetchEventsByDate возвращал Promise - но это нормально, потому что fullCalendar может использовать это, если обещание возвращает массив данных события при разрешении . Примерно так: 

events: function( fetchInfo, successCallback, failureCallback ) {
  var promise = fetchEventsByDate(fetchInfo.start,fetchInfo.end); //  used to call json api and fetch the data
  return promise;
}

В любом случае вся ваша функция $scope.refresh_events будет избыточна и может быть удалена.

PS, конечно, могут быть другие ошибки, которые не очевидны из код показан, но, к сожалению, в своем вопросе вы просто описали функциональность как «не работает», описание, которое вообще не предоставляет никакой полезной информации. Поэтому в отсутствие какого-либо точного описания текущего поведения кода, которое могло бы дать ключ к разгадке root причины определенных c проблем, я предположил, что перечисленные выше изменения - это все, что необходимо для того, чтобы заставить его делать то, что ожидается.

...