fullcalendar multiple calendars, how to click prev/next for all calendars

Question

So I'm using fullcalendar for this project, having multiple calendars on the same page, each with their own prev/next/today buttons. What I am trying to accomplish is when clicking on the prev/next that it would fire for all the calendars on the page, not just the one it's tied to if that makes sense. I tried using jQuery to accomplish this since they have the same class names, below is an example of a click function I've tried but doesn't quite work how I expected it.

$(".fc-next-button").click(function (i) {
        var nextBtn = $('.fc-next-button');
        //alert(nextBtn.length);
        for (var i = 0; i < nextBtn.length; i++) {
            nextBtn[i].click();
        }
    });

For example, I have five calendars, when I do click next the function causes the current calendar to move 5 weeks ahead, not all the calendars. Any help would be appreciated.

Answer 1

This is happening because your loop clicks all the "next" buttons. This means effectively that whichever one you clicked on gets clicked twice - once by you manually, and once by the code. Also, the click event gets called over and over because every time you call "click" it triggers the event handler again.

A better approach would be to work out which calendar the button belongs to, and then call fullCalendar's next method on all the calendars except that one. Something like this:

  $(".fc-next-button").click(function () {
    var calendar = $(this).closest(".calendar");
    $(".calendar").not(calendar).fullCalendar('next');
  });

The $(".calendar") bit assumes all your calendar elements have a class attribute in common, like in this demo: https://codepen.io/ADyson82/pen/OJVMPVy?editable=true&editors=001