Wie rufe ich Ereignisse auf, wenn ich auf die Schaltflächen „Zurück“ und „Weiter“ klicke?

Im jQuery voller Kalender wir haben vorherige und nächste Schaltflächen. Wie können wir einige Ereignisse beim Klicken auf diese Schaltflächen aufrufen?

Der beste Weg ist:

viewRender: function(view, element) {
  var b = $('#calendar').fullCalendar('getDate');
  alert(b.format('L'));
},

Sie könnten einfach ein Ereignis an die Schaltfläche anhängen:

$('.fc-button-prev span').click(function(){
   alert('prev is clicked, do something');
});

$('.fc-button-next span').click(function(){
   alert('nextis clicked, do something');
});

Das hat bei mir funktioniert:

$('body').on('click', 'button.fc-prev-button', function() {
  //do something
});

$('body').on('click', 'button.fc-next-button', function() {
  //do something
});

Wenn Sie darauf klicken, wird das viewRender-Ereignis ausgelöst. Sie können Ihren Code auch darin einfügen.

$('#calendar').fullCalendar({
    viewRender: function(view, element) {
        //Do something
    }
});

Ich sehe, es gibt andere funktionierende Antworten, aber meiner Meinung nach die einfachste und korrektere – zumindest mit Vollständiger Kalender v.4 – ist abzufangen prev und next ist, sie wie benutzerdefinierte Schaltflächen zu behandeln.

Hier mein Setup (mit Toaster nur zu Demozwecken)

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

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'dayGrid', 'timeGrid' ],
    header: {
      left: 'dayGridMonth,timeGridWeek,timeGridDay',
      center: 'title',
      right: 'prev,next'
    },
    footer: {
      left: '',
      center: '',
      right: 'prev,next'
    },
    customButtons: {
      prev: {
        text: 'Prev',
        click: function() {
                    // so something before
                    toastr.warning("PREV button is going to be executed")
                    // do the original command
                    calendar.prev();
                    // do something after
                    toastr.warning("PREV button executed")
        }
      },
      next: {
        text: 'Next',
        click: function() {
                    // so something before
                    toastr.success("NEXT button is going to be executed")
                    // do the original command
                    calendar.next();
                    // do something after
                    toastr.success("NEXT button executed")
        }
      },
    }
  });

  calendar.render();
});

Ein … sehen Codepen hier

Wenn der nächste und früher Schaltflächen angeklickt werden, die Veranstaltungen Funktion aufgerufen wird. Hier ist ein Beispiel zum Laden von Daten für das aktuelle Jahr:

$(document).ready(function() {
  loadCal();
});

function loadCal() {

  var current_url="";
  var new_url="";

  $('#calendar').fullCalendar({

    // other options here...

    events: function(start, end, callback) {

      var year = end.getFullYear();

      new_url="/api/user/events/list/" + id + '/year/' + year;

      if (new_url != current_url) {

        $.ajax({
          url: new_url,
          dataType: 'json',
          type: 'POST',
          success: function(response) {

            current_url = new_url;
            user_events = response;

            callback(response);
          }
        })
      } else {
        callback(user_events);
      }
    }
  })
}

Stellen Sie beim Abrufen der Ergebnisse in einer Abfrage sicher, dass Sie mindestens die letzten 10 Tage des Vorjahres und die ersten 10 Tage des Folgejahres einbeziehen.

LÖSUNG IN FULLCALENDAR VERSION 5:

Wenn Sie Version 5 von FullCalendar verwenden, empfehle ich Ihnen, die zu verwenden datesSet anstatt die zu verwenden .click().

datesSet: function() {
    myFunction();
}

Das myFunction() wird jedes Mal aufgerufen, wenn der Datumsbereich des Kalenders geändert oder initialisiert wurde. Mit anderen Worten, wenn Sie auf die bereitgestellten Zurück-/Weiter-Schaltflächen im Kalender klicken, wird der Datumsbereich des Kalenders geändert und die myFunction() wird angerufen werden.

Hinweis: https://fullcalendar.io/docs/datesSet

Wenn du wirklich mitgehen willst .click() Übrigens funktioniert der folgende Code für Version 5 von FullCalendar.

$('.fc-prev-button').click(function(){
    myFunction();
});

$('.fc-next-button').click(function(){
    myFunction();
});

Beide Methoden funktionieren perfekt in meinem Projekt (VERSION 5 VON FULLCALENDAR), ich hoffe, dies kann Leuten helfen, die mit dem Problem zu kämpfen haben.