Fullcalendar v4: сбой интеграции кнопки «Предыдущая» и «Назад» браузера - PullRequest
Новая
       30

Fullcalendar v4: сбой интеграции кнопки «Предыдущая» и «Назад» браузера

1 голос
/ 14 мая 2019

Я использую Fullcalendar v4 и пытаюсь подключить кнопки браузера вперед / назад к навигации по FC.У меня возникла проблема при попытке использования кнопок браузера после нажатия кнопки prev FC на дисплее месяца.

Я попытался создать скрипку и использовать codepen, но я думаю, что оболочки, используемые этими сайтами, мешают некоторым аспектамсобытий кнопки браузера.Я установил сокращенный образец в ЗДЕСЬ

Пример ожидаемого поведения:

  • Посетите ссылку выше;нажмите на ссылку Go to calendar (для тестирования мне нужна стартовая страница, чтобы проверить работу кнопки «Назад» с «домашней» страницы реального календаря).

  • Посмотрите на верхнюю часть справа отпанель инструментов календаря и нажмите месяц, а затем по очереди кнопки дня.

  • Используйте кнопки браузера назад / вперед для перемещения между представлениями.

Anпример некорректного поведения:

  • Перейти к представлению месяца.Посмотрите вверху слева от панели инструментов календаря и нажмите кнопку «<» <code>prev.Это вернет дисплей на один месяц назад.

  • Попробуйте использовать кнопку «Назад» браузера, чтобы вернуться к начальному виду месяца, и ничего не происходит.

Я управляю состоянием календаря через window.history.state.Мне кажется, что при первом посещении страницы значение window.history.state равно нулю.Одна из самых первых вещей, которая происходит после инициализации и рендеринга Fullcalendar, заключается в том, что отображается исходное представление и вызывается datesRender.

Я проверяю, является ли window.history.state нулевым, и если да, я используюwindow.history.replaceState для установки состояния просмотра по умолчанию.Затем я использую replaceState или pushState для добавления или обновления информации о состоянии. 

    'datesRender': function (info) {
        if (window.history.state === null) {
            //
            // seems like when a page is first visited the history
            // for that page has a null state.  Add a default state.
            const tempState = {
                'view': info.view.type,
                'range': {
                    'start': moment(info.view.activeStart)
                        .local().format(dateFormatHuman),
                    'end': moment(info.view.activeEnd)
                        .local().format(dateFormatHuman)
                },
                'url': window.location.href,
                'comment': "INIT"
            };

            window.history.replaceState(
                tempState,
                "INIT",
                window.location.href
            );
        } else {
            //
            // if state.comment = POP then we are here after a
            // BACK button press.  Change the comment to "dateRender".
            if (window.history.state.comment === "POP") {
                const tempState = window.history.state;
                tempState.comment = "datesRender";

                window.history.replaceState(
                    tempState,
                    "From pop",
                    window.location.href
                );
            } else {
                //
                // there is current state and we need to change views.
                // add new state for the new view
                const state = {
                    'view': info.view.type,
                    'range': {
                        'start': moment(info.view.activeStart)
                            .local().format(dateFormatHuman),
                        'end': moment(info.view.activeEnd)
                            .local().format(dateFormatHuman)
                    },
                    'url': window.location.href,
                    'comment': "datesRender"
                };

                window.history.pushState(
                    state,
                    "datesRender",
                    window.location.href
                );
            }
        }
    },

При нажатии кнопок вперед / назад в браузере запускается событие window.onpopstate.Когда обработчик запущен, «current» window.history.state - это состояние после кнопки браузера POP.Я обновляю комментарий состояния, чтобы пометить его как событие кнопки браузера, затем вызываю метод Fullcalendar changeView, чтобы обновить представление. 

    function handleStatePopEvent(event) {
        try {
            const tempState = window.history.state;
            tempState.comment = "POP";

            window.history.replaceState(
                tempState,
                tempState.comment,
                tempState.url
            );

            calendar.changeView(
                window.history.state.view,
                window.history.state.range
            );
        } catch (e) {
            throw `handleStatePopEvent: ${e.message}`;
        }
    }

Проблема заключается в том, что после нажатия кнопки Fullcalendar prev что-то щелкаетизменения во внутреннем состоянии ФК - хотя я не могу этого доказатьwindow.history.state правильно изменяется в datesRender.При нажатии кнопки «Назад» в браузере срабатывает событие window.onpopstate, и диапазоны просмотра и даты верны, чтобы вернуться к просмотру предыдущего месяца, но вызов changeView ничего не отображает.

Я использовал свой браузерСредства разработки отладчика и прошли весь путь через changeView в этом случае.Ничто драматическое не выскакивает на меня, кроме как в какой-то момент появляется флаг, который, кажется, говорит: «Нужно ли что-нибудь визуализировать?»установлено на false.

Я что-то не так делаю?

...