Affecting Fullcalendar today button .fc-today-button

Question

I'm having trouble getting custom controls to work when clicking the 'today' button that is part of Fullcalendar.

All the documentation I can find tells me that Fullcalendar's built-in controls can be affected using two methods:

So, this one works for me when it's applied to previous, next, month, agendaWeek and agendaDay, but not for 'today' (button.fc-today-button):

    $('body').on('click', 'button.fc-next-button', function() {
            console.log('I Clicked Next');
    });

Some documentation also say that this works, although I can't make it do so on any button:

    $('.fc-next-button span').click(function(){
            console.log('I Clicked Next');
    });

Does anyone know why this is and what I'm doing wrong?

Answer 1

Well, you want to affect the "today" button, yet you are adding code for the "next" button. You want to do something like:

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

This applies a click event to anything with the class "fc-today-button" (that is the class that the Today button will have).

Working example:

$('#fullCal').fullCalendar({
    events: [{
        title: 'Event 1',
        start:  moment().add(1, 'h'),
        end: moment().add(2, 'h'),
        allDay: false
    }], 
    header: {
        left: '',
        center: 'prev title next today',
        right: ''
    },
    timezone:'local',
    defaultDate: '2014-11-15',
    editable: false,
    eventLimit: false,
    firstDay: 6,
    defaultView: 'agendaWeek',
});
               
$(".fc-today-button").click(function() {
    alert('Clicked Today!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>

<div id="fullCal"></div>

Answer 2

After investigation and the help of MikeSmithDev (thanks Mike - your help was invaluable), it appears as though the 'today' event only gets triggered if it physically positioned below/after the calendar, the rest of the header controls (button.fc-next-button etc) don't seem to mind where they are physically positioned.

Likely the first function executes before the calendar is finished loading... so it works, there is just no button to bind it to.