FullCalendar dayClick not working (does nothing)

I think this will be useful if someone is using fullcalendar 4.2.0.

  1. make sure interaction plugin is getting load.
  2. instead of dayClick use dateClick. They have changed the event name.

I used fullcalendar in company project ,when the table in below window view ,The dayClick not working, finally I find the css of "html{overflow-x:hidden}" result,I remove the css,it's ok.


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!


Only relevant for FullCalender v2:

I found that on my calendar the div with the class fc-bg was hidden by using display:none;. It turns out that this is what the dayClick event is attached to, and since it was hidden, I could not click on it.

The reason why the fc-bg class had been hidden was because of a print CSS that I included on the page. It turns out that it is super important that this stylesheet has media="print" on the link, otherwise it will always be used.

When including the FullCalendar CSS files on your page, ensure that the links are like this:

<link href="/css/vendor/fullcalendar.min.css" rel="stylesheet" />
<link href="/css/vendor/fullcalendar.print.css" media="print" rel="stylesheet" />