James James - 16 days ago 15
Javascript Question

FullCalendar dayClick not working (does nothing)

I am trying to get the 'dayClick' function to work on FullCalendar, but when I press on any empty day, nothing happens. I have searched all over SO and cannot find any solutions or figure out what's going on.

Here is my code:

$(document).ready(function () {
$('#calendar').fullCalendar({
header: {
left: 'title',
center: '',
right: 'prev,next today'
},
defaultView: 'month',
weekends: false,
editable: false,
selectable: true,
events: "/Home/GetEvents/",

eventClick: function (calEvent, jsEvent, view) {
alert('You clicked on event id: ' + calEvent.id
+ "\nSpecial ID: " + calEvent.someKey
+ "\nAnd the title is: " + calEvent.title);

},

dayClick: function (date, jsEvent, view) {
alert("Day Clicked");
$('#eventDate').val($.fullCalendar.formatDate(date, 'dd/MM/yyyy'));
ShowEventPopup(date);
}
});
});

Answer

After spending further time on this and having confirmation from Ram Singh that his calendar worked fine with my code, I dug deeper into the packages I used and noticed I wasn't using bootstrap.js as this previously conflicted with my calendar. Consequently, I added this back in BUT updated it to the latest version in hope that it would resolve any dependency conflicts. I also updated all of my other packages to their latest versions in hope that this would also help and now it works perfectly! :)

Hopefully this information may help someone else!