FullCalendar v4 navigation button click handler

Question

How do I attach a handler to the navigation buttons in FullCalendar v4? There is nothing specified in the official documentation.

There's no built in handler in fullCalendar to detect those buttons directly. They cause the view rendering events but you can't tell how the view rendering was triggered. You'd have to inspect those elements with your browser tools, find a suitable class or ID for them and attach your own click handler to each one in the normal way using addEventListener. But an interesting question would be: why do you want to? What's the use case. fullCalendar doesn't provide listeners for them because it's not envisaged that you would need to detect these buttons specifically. — ADyson, Jun 04 '19 at 10:40
In my case, I have to implement my own caching for events because the build in json methods are not sufficient. So you answered my question by saying that I should fetch new events in the view rendering methods. But what is the best method to do this? — Dany Dhondt, Jun 04 '19 at 14:09
I'm not sure what your caching issue is (too much, too little, or what) but I would expect that you can still stick to fullCalendar's recommended methods for setting up event sources. You can use the custom-function style of event source, within which you can define any type of AJAX request you like, with whatever caching or other options you require. See https://fullcalendar.io/docs/events-function for details. I sincerely doubt you need these custom buttons (and besides, they are not the only way to change the view and/or date range) — ADyson, Jun 04 '19 at 18:31
P.S. If the issue is that you want to stop fullCalendar from caching events, then you can switch https://fullcalendar.io/docs/lazyFetching to false. — ADyson, Jun 04 '19 at 18:32
You're right, I'll use the event sources mechanism to tackle my problem. Maybe you should post your comment as an answer so I can mark it as answered. thx — Dany Dhondt, Jun 05 '19 at 05:45

score 2 · Answer 1 · answered Jun 04 '19 at 12:43

2

One way to get what you need is to hide the default prev and next buttons and replace with your own custom buttons, for which there are click callbacks.

Please see https://codepen.io/ormasoftchile/pen/NVJeez for a working example.

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

Regards, Cristian

answered Jun 04 '19 at 12:43

Cristián Ormazábal

1,457
1
9
18

1

Thanks Cristian for you answer. I knew I could implement custom functions but I thought that the build in buttons would also trigger events which isn't the case. ADyson pointed out that I should use the view rendering methods instead. – Dany Dhondt Jun 04 '19 at 14:11
They can even be named "prev" and "next" and will replace original prev and next buttons with all same class names. – Mikhail Batcer Jan 13 '23 at 16:28

score 2 · Answer 2 · answered Dec 09 '19 at 10:52

The only build-in method is the events: fn () callback. From the docs

FullCalendar will call this function whenever it needs new event data. This is triggered when the user clicks prev/next or switches views.

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();
});

FullCalendar v4 navigation button click handler

2 Answers2