42

In jQuery fullcalendar we have previous and next buttons. How can we call some events on click of these buttons?

0

17 Answers 17

39

The best way is:

viewRender: function(view, element) {
  var b = $('#calendar').fullCalendar('getDate');
  alert(b.format('L'));
},
7
  • 5
    This is better than getting elements from DOM with jQuery. Aug 29, 2016 at 19:45
  • 2
    This should be the answer
    – WtFudgE
    Jul 25, 2018 at 12:16
  • 2
    This isn't quite right, actually, because this will fire when next or previous buttons are clicked and if the view changes, say from month to week. It's not specifically for next/previous, as the question asks for.
    – Soulriser
    Jul 27, 2018 at 19:04
  • 1
    This worked for me when going to the last item in a list view, while the jQuery solution did not since the next button was disabled (along with the event handler) before the event could fire. Since this is also built into FullCalendar, this should definitely be the accepted answer.
    – A N
    Jun 27, 2019 at 15:09
  • This Works for me! Thanks Aug 13, 2020 at 5:21
33

You couldsimply attach an event to the button:

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

$('.fc-button-next span').click(function(){
   alert('nextis clicked, do something');
});
12
  • 1
    Ok.. I thought there may be some already written function for the cause... Thanks..
    – Neo
    Jul 22, 2011 at 10:47
  • 2
    Is it possible to Cancel the next/prev action, ie to let the user save changes first? Jan 13, 2012 at 15:42
  • 11
    In the current version (2.5.0), you should use $('.fc-prev-button') & $('.fc-next-button') instead of $('.fc-button-prev span') & $('.fc-button-next span').
    – ymyzk
    Dec 22, 2015 at 22:39
  • 3
    for me it works if i specify like this... $(document).on('click','.fc-next-button', function () {} Sep 7, 2016 at 6:17
  • 2
    Using the viewRender callback is definitely the better way to go
    – Koes Bong
    Jun 8, 2017 at 20:47
19

This worked for me:

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

$('body').on('click', 'button.fc-next-button', function() {
  //do something
});
1
  • 2
    thank you man! this is the only approach that it worked for me.
    – Carlos
    Nov 25, 2017 at 4:29
13

I see there are other working answers, but IMHO the simplest and more correct - at least using FullCalendar v.4 - is to intercept prev and next is to deal them in the same way of custom buttons.

Here my setup (using toastr just for demo purposes)

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

See a Codepen here

12

When you click them, viewRender event is triggered. You could add your code inside it as well.

$('#calendar').fullCalendar({
    viewRender: function(view, element) {
        //Do something
    }
});
1
  • 1
    I find this in answer much more accurate than the selected on. Base on view object, how can you know if you press previous or next ?
    – julio
    Jan 25, 2016 at 15:39
10

SOLUTION IN FULLCALENDAR VERSION 5:

If you're using version 5 of FullCalendar, I will suggest u to use the datesSet instead of using the .click().

datesSet: function() {
    myFunction();
}

The myFunction() will be called every time when the date range of calendar has been changed or initialised. In other word, when u click on the provided prev/next buttons in the calendar, the calendar's date range will be changed and the myFunction() will be called.

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

If u really want to go with the .click() way, the following code is working for version 5 of FullCalendar.

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

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

Both methods are perfectly work in my project (VERSION 5 OF FULLCALENDAR), hope this can help people who are struggling with the issue.

9

When the next and previous buttons are clicked, the events function is called. Here is an example to load data for the current year:

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

When you retrieve the results in a query, make sure you include at least the last 10 days from the previous year and the first 10 days from the next year.

2
  • 1
    This is the proper way of doing instead jquery selctor. Worked like charm for me. Many thanks
    – Sumanta
    Jan 15, 2014 at 18:20
  • This is the accurate way to do so as this facility provided by calender.js itself. No need to go for other code.+1 Feb 10, 2021 at 6:28
6

Version 3 the answer is to use:

viewRender: function (event, element, view){
// you code here
}

Version 4: https://fullcalendar.io/docs/v4/datesRender

datesRender: function (){
    // you code here
    }

https://fullcalendar.io/docs/v4/upgrading-from-v3

"viewRender Renamed to datesRender. Parameters have changed."


Version 5 Use :

datesSet: function (){
    // you code here
    }

"datesRender changed to: datesSet - renamed from datesRender. Called after a view's dates are initialized or when they change." https://fullcalendar.io/docs/upgrading-from-v4

1
  • dates are already fetched for your solution - the op wants the trigger of the click - not the render
    – TV-C-1-5
    May 25, 2022 at 23:20
2

Another solution is to define your custom prev/next button:

$('#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
  • For me using datesSet doesn't suit to my needs since this callback is called not only when clicking prev/today/next button also when "user change the view, click a navlink [...] the current-date is manipulated via the API, such as when gotoDate is called...". Using customButtons is more accurate.
    – Moussa
    Jun 10, 2022 at 8:15
1

Just a quick update, no idea for how long but the accepted answer works for me like this:

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

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

Notice slight change,

also on today click is as follows:

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

Hope i helped someone.

1

During declaration of Calendar in events you can write the event's callback function:

$('#calender').fullCalendar({

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

//eventsarray - This is a collection of data of the calendar. You can also call month wise function in this by passing first and last date of selected / current month and handle prev and next event.

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

   //do your work 

});


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

   //do your work 

});
0
0

Instead of click use on

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

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

this is useful when your calendar can dynamically initialize at any point of time.

0

If you didn't make it with the answers above, try this:

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

$('span.fc-button.fc-button-next.fc-state-default.fc-corner-right').click(function() {
    alert('next is clicked, do something');
});
0

FullCalendar v3.4.0

Prev, next. today, week, month buttons:

$(document).ready(function(){

$('#mycalendar').fullCalendar({


$('.fc-prev-button').click(function(){
        alert("Clicked prev button");
    });

    $('.fc-next-button').click(function(){
        alert("Clicked next button");
    });

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

    $('.fc-listWeek-button').click(function(){
        alert('list week clicked, do something');
    });

    $('.fc-listMonth-button').click(function(){
        alert('list month clicked, do something');
    });

});

});
0

Version 6
Why not a fairly effective more globale solution with few code... pure js

document.querySelectorAll(('.fc-button')).forEach(button => {
    button.onclick = () => 'do something...'
})
0

You can use customButtons to get event click or to change button icon, like my code below:

$('#fullcalendar').fullCalendar({
    themeSystem: 'jquery-ui',
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,listMonth'
    },
    height: 'auto',
    editable: false,
    eventSources: [],
    showNonCurrentDates: false,
    fixedWeekCount: false,

    // custom button
    customButtons: {
        prev: {
            // text: 'Prev', // you can choose to use text or icon to your button
            icon: 'left-single-arrow',
            click: function() {
                console.log('Prev');
            }
        },
        next: {
            // text: 'Next', // you can choose to use text or icon to your button
            icon: 'right-single-arrow',
            click: function() {
                console.log('Next');
            }
        },
    }
});

$('#fullcalendar').fullCalendar('render');
1
  • 1
    As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Jun 23, 2023 at 11:39

Not the answer you're looking for? Browse other questions tagged or ask your own question.