FullCalendar dayClick not working (does nothing)

Question

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 sol

Answer 1

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!

Answer 2

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.

Answer 3

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 = new FullCalendar.Calendar(calendarEl, {
        height: 600,
        plugins: [ 'dayGrid', 'interaction' ],  // interaction plugin must be specified
        
        dateClick: 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();
  });

<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.2.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.2.0/main.js"></script>

<!-- interaction plugin must be included after core -->
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@4.2.0/main.js"></script>

<link href="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.2.0/main.min.css" rel="stylesheet"/>

<div id="calendar"></div>

Answer 4

I have a similar problem with the fullcalendar v4.0.0 beta... I created a patch until it will fixed:

$('.fc-slats tr').on('click', function(e) {   
e.stopPropagation();
var time:any = $(this).attr('data-time');
var parentOffset:any = $(this).parent().offset(); 
var positionX = e.pageX - parentOffset.left;
var width:any = $(this).width();
var dayOfWeek = (positionX) * 7 / (width);
dayOfWeek = Math.floor(dayOfWeek) + 1;
dayOfWeek = dayOfWeek == 7 ? 0 : dayOfWeek;

var auxDays:any = (moment(context.state.currentDate).day() - dayOfWeek) * -1;

var date:any = moment(context.state.currentDate).add('days', auxDays);
var auxTime:any = time.split(':');
date.set({hour:auxTime[0] - 0,minute:auxTime[1]  - 0,second:0,millisecond:0})
date = date.toDate();
const elem = document.getElementById('modalFormSchedule');
const instance = Materialize.Modal.getInstance(elem as Element);
instance.open();
});


// Style
.fc-nonbusiness {
pointer-events: none !important;
}

Answer 5

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.

Answer 6

I have downloaded the code and just added your dayClick code in demo code it is working fine. Please see the below code:

<script>

    $(document).ready(function () {

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            defaultDate: '2016-01-12',
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: [
            {
                title: 'All Day Event',
                start: '2016-01-01'
            },
            {
                title: 'Long Event',
                start: '2016-01-07',
                end: '2016-01-10'
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: '2016-01-09T16:00:00'
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: '2016-01-16T16:00:00'
            },
            {
                title: 'Conference',
                start: '2016-01-11',
                end: '2016-01-13'
            },
            {
                title: 'Meeting',
                start: '2016-01-12T10:30:00',
                end: '2016-01-12T12:30:00'
            },
            {
                title: 'Lunch',
                start: '2016-01-12T12:00:00'
            },
            {
                title: 'Meeting',
                start: '2016-01-12T14:30:00'
            },
            {
                title: 'Happy Hour',
                start: '2016-01-12T17:30:00'
            },
            {
                title: 'Dinner',
                start: '2016-01-12T20:00:00'
            },
            {
                title: 'Birthday Party',
                start: '2016-01-13T07:00:00'
            },
            {
                title: 'Click for Google',
                url: 'http://google.com/',
                start: '2016-01-28'
            }
        ],

            dayClick: function (date, jsEvent, view) {
                alert("Day Clicked");
            },
            eventClick: function (event) {
                alert('event');
            }
        });

    });

 <div id='calendar'>

i think you are missing to declare anything or you are getting any other error. Please check your Firebug console.