fullcalendar today button needs double-click to trigger the event

Question

I'm using fullcalendar with month, agendaWeek, and agendaDay(with resources) views and I'm facing some problems with Today button in agendaDay view. While Prev and Next buttons work as supposed, I need to click on Today button twice to trigger the click event, even though it only needs one click in other views.

$('#calendar').fullCalendar({
    ...
    viewRender: function () {
        var $todayButton = $('.fc-today-button');
        $todayButton.removeClass('fc-state-disabled');
        $todayButton.prop('disabled', false);
    },
    ...
});

$(document).on('click', '.fc-prev-button, .fc-today-button, .fc-next-button', function () {
    console.log('CLICKED!');
});

UPDATE: The problem disappears when I delete these lines from fullcalendar setup:

$('#calendar').fullCalendar({
    ...
    refetchResourcesOnNavigate: true,
    resources: '/my-path/resources',
    ...
});

Sorry but I can't reproduce this behaviour. I have never known this to be an issue. See jsfiddle.net/toytd26b/37 for an example working nicely with a single click. If you still have a problem, try to show us enough of your code so that it actually reproduces the problem. — ADyson
@ADyson It seems that I found what is causing the problem, but I still don't know why. I updated the post. — brklja
jsfiddle.net/toytd26b/38 demonstrates that those lines are not the whole story. Is your resources URL returning very slowly, or perhaps occasionally failing or something? — ADyson
@ADyson It never fails and it's returning pretty fast since it's getting resources with businessHours that may contain multiple shifts. The first click renders today's date on calendar but it doesn't trigger my callback. Second click triggers it. — brklja
Hm well I can't reproduce that at all, so it's a little difficult to help, sorry — ADyson

brklja brklja · Accepted Answer · 2018-03-14T09:40:02

I solved my problem by adding custom today button and reproducing its functionality. This is a workaround but it works like a charm.

$('#calendar').fullCalendar({
    customButtons: {
        todayButton: {
            text: 'today'
        }
    },
    header: {
        left: 'todayButton prev,next',
        ...
    },
    ...
});

$(document).on('click', '.fc-todayButton-button', function () {
    var todayDate = moment().format('YYYY-MM-DD');
    $('#calendar').fullCalendar('gotoDate', todayDate);

    + NEEDED ACTIONS FOR RENDERING EVENTS
});

fullcalendar today button needs double-click to trigger the event

2 Answers