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

Solution 1:

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" />

Solution 2:

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.

Solution 3:

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!

Solution 4:

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.

Solution 5:

Ran into the same issue when using v4.2.0. Turns out that the interaction plugin wasn't loaded. The event is also now called dateClick instead of dayClick.

A working example is below.

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = newFullCalendar.Calendar(calendarEl, {
        height: 600,
        plugins: [ 'dayGrid', 'interaction' ],  // interaction plugin must be specifieddateClick: function(info) {
            alert('Clicked on: ' + info.dateStr);
            alert('Current view: ' + info.view.type);

            // change the day's background color just for fun
            info.dayEl.style.backgroundColor = 'red';
        },
    });

    calendar.render();
  });

<scriptsrc="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.2.0/main.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.2.0/main.js"></script><!-- interaction plugin must be included after core --><scriptsrc="https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@4.2.0/main.js"></script><linkhref="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.2.0/main.min.css"rel="stylesheet"/><divid="calendar"></div>