web-dev-qa-db-fra.com

Comment appeler des événements en cliquant sur le bouton précédent et suivant?

Dans jQuery fullcalendar nous avons des boutons précédent et suivant. Comment pouvons-nous appeler certains événements en cliquant sur ces boutons?

javascriptjqueryfullcalendar
25
Neo

Vous pouvez simplement attacher un événement au bouton:

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

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

La meilleure façon est:

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

Cela a fonctionné pour moi:

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

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

Lorsque vous cliquez dessus, l'événement viewRender est déclenché. Vous pouvez également y ajouter votre code.

$('#calendar').fullCalendar({
    viewRender: function(view, element) {
        //Do something
    }
});
8
Allfarid Morales García

Quand le next et previous les boutons sont cliqués, la fonction événements est appelée. Voici un exemple pour charger des données pour l'année en cours:

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

Lorsque vous récupérez les résultats dans une requête, assurez-vous d'inclure au moins les 10 derniers jours de l'année précédente et les 10 premiers jours de l'année suivante.

7
Onshop

Une autre solution consiste à définir votre bouton personnalisé précédent/suivant:

$('#m_calendar').fullCalendar({
 header: {
         left: 'customPrevButton,customNextButton today',
         center: 'title',
 },
 customButtons: {
                customPrevButton: {
                    text: 'custom prev !',
                    click: function () {
                        alert('custom prev ! clicked !');

                    }
                },
                customNextButton: {
                    text: 'custom ext!',
                    click: function () {
                       alert('custom ext ! clicked !');
                    }
                },
            }
});
1
Jack Le Black

Pendant la déclaration du calendrier dans les événements, vous pouvez écrire la fonction de rappel de l'événement:

$('#calender').fullCalendar({

events:  function (start, end, timezone, callback) {
                    callback(eventsarray);
                }
});

// eventsarray - Ceci est une collection de données du calendrier. Vous pouvez également appeler la fonction mois par mois en passant la première et la dernière date du mois sélectionné/en cours et gérer l'événement précédent et suivant.

1
Mahavirsinh Padhiyar

Juste une mise à jour rapide, aucune idée de combien de temps mais la réponse acceptée fonctionne pour moi comme ceci:

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

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

Remarquez un léger changement,

également sur aujourd'hui, le clic est le suivant:

$(".fc-today-button").click(function () {

J'espère que j'ai aidé quelqu'un.

1
Иво Недев
$('.fc-button-next span').click(function(){

   //do your work 

});


$('.fc-button-prev span').click(function(){

   //do your work 

});
0
Kanishka Panamaldeniya