FullCalendar dayClick not working (does nothing)

user_5025993 0
Viewed 13897

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);
            }
        });
    });
fullcalendar asp.net-mvc jquery javascript
8 Answers

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.
user_63668680

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>

Mun_7750

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;
}
user_23721870
Related