Fullcalendar button will affect today.fc-today-button
I am having problems setting custom controls when clicking the Today button, which is part of Fullcalendar.
All the documentation I can find tells me that inline Fullcalendar controls can be affected in two ways:
So this works for me when it applies to the previous, next, monthly, agenda and agenda, but not for "today" ( button.fc-today-button
):
$('body').on('click', 'button.fc-next-button', function() {
console.log('I Clicked Next');
});
Some docs also say this works, although I can't get it to do it on any button:
$('.fc-next-button span').click(function(){
console.log('I Clicked Next');
});
Does anyone know why this is the case and what I am doing wrong?
source to share
After researching and helping MikeSmithDev (thanks to Mike, your help was invaluable) it looks like the "today" event only fires if it's physically below / after the calendar, the rest of the title controls ( button.fc-next-button
etc.) seem to , have nothing to do with physical location.
Probably the first function is executed before the calendar finishes loading ... so this works, there is simply no button to bind to it.
source to share
Well, you want to affect the Today button, but you add code for the next button. You want to do something like:
$(".fc-today-button").click(function() {
alert('Clicked Today!');
});
This will apply a click event to anything with the "fc-today-button" class (this 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>
source to share