Обработчик нажатия кнопки навигации FullCalendar v4

Как прикрепить обработчик к кнопкам навигации в FullCalendar v4? В официальной документации ничего не указано.

введите описание изображения здесь


person Dany Dhondt    schedule 04.06.2019    source источник
comment
В fullCalendar нет встроенного обработчика для непосредственного обнаружения этих кнопок. Они вызывают события рендеринга представления, но вы не можете сказать, как был запущен рендеринг представления. Вам нужно будет проверить эти элементы с помощью инструментов вашего браузера, найти для них подходящий класс или идентификатор и прикрепить свой собственный обработчик кликов к каждому из них обычным способом с помощью addEventListener. Но может возникнуть интересный вопрос: зачем вам это нужно? Какой вариант использования. fullCalendar не предоставляет для них слушателей, потому что не предусмотрено, что вам нужно будет специально обнаруживать эти кнопки.   -  person ADyson    schedule 04.06.2019
comment
В моем случае мне нужно реализовать собственное кеширование событий, потому что встроенных методов json недостаточно. Итак, вы ответили на мой вопрос, сказав, что я должен получать новые события в методах рендеринга представления. Но как лучше всего это сделать?   -  person Dany Dhondt    schedule 04.06.2019
comment
Я не уверен, в чем заключается ваша проблема с кешированием (слишком много, слишком мало или что-то еще), но я ожидаю, что вы все равно можете придерживаться рекомендуемых методов fullCalendar для настройки источников событий. Вы можете использовать стиль источника событий с настраиваемой функцией, в котором вы можете определить любой тип запроса AJAX, который вам нравится, с любым кешированием или другими параметрами, которые вам требуются. Подробнее см. fullcalendar.io/docs/events-function. Я искренне сомневаюсь, что вам нужны эти настраиваемые кнопки (и, кроме того, они не единственный способ изменить вид и / или диапазон дат)   -  person ADyson    schedule 04.06.2019
comment
P.S. Если проблема в том, что вы хотите, чтобы fullCalendar не кэшировал события, вы можете переключить fullcalendar.io/docs/lazyFetching на ложь.   -  person ADyson    schedule 04.06.2019
comment
Вы правы, я воспользуюсь механизмом источников событий, чтобы решить свою проблему. Возможно, вам стоит опубликовать свой комментарий в качестве ответа, чтобы я мог отметить его как ответ. Спасибо   -  person Dany Dhondt    schedule 05.06.2019


Ответы (2)


Один из способов получить то, что вам нужно, - это скрыть кнопки «Назад» и «Далее» по умолчанию и заменить их собственными настраиваемыми кнопками, для которых есть обратные вызовы при нажатии.

См. Рабочий пример https://codepen.io/ormasoftchile/pen/NVJeez.

    customButtons: {
      customprev: {
        text: '<',
        click: function() {
          alert('clicked custom button 1!');
          calendar.prev();
        }
      },
      customnext: {
        text: '>',
        click: function() {
          alert('clicked custom button 2!');
          calendar.next();
        }
      }
    }

С уважением, Кристиан

person Cristián Ormazábal    schedule 04.06.2019
comment
Спасибо, Кристиан за ответ. Я знал, что могу реализовать собственные функции, но думал, что встроенные кнопки также будут запускать события, а это не так. ADyson указал, что вместо этого я должен использовать методы рендеринга представления. - person Dany Dhondt; 04.06.2019

Единственный встроенный метод - это обратный вызов events: fn (). Из документации

FullCalendar будет вызывать эту функцию всякий раз, когда ему нужны новые данные о событии. Это срабатывает, когда пользователь нажимает предыдущий / следующий или переключает просмотры.

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'dayGrid' ],
        defaultView: 'dayGridMonth',
        events: function (info) {
            console.log(info);
        }
    });

    calendar.render();
});
person Red    schedule 09.12.2019