I am trying to convert an old Fullcalendar based web app to V4. I can not get dayClick to fire.

I have this CodePen example: ?&editable=true&editors=001

The example was initialized via a lik=nk from the FC web site. See below. It brings up a dayGridMonth view by default. It includes the interaction plugin but the dayClick method does not fire, no matter what day cell i click in.

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

      var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
        defaultView: 'dayGridMonth',
        defaultDate: '2019-04-07',
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        dayClick: function(info) {
                    alert("dayClick ");
        },
        events: [
          {
            title: 'All Day Event',
            start: '2019-04-01'
          },
          {
            title: 'Long Event',
            start: '2019-04-07',
            end: '2019-04-10'
          },
          {
            groupId: '999',
            title: 'Repeating Event',
            start: '2019-04-09T16:00:00'
          },
          {
            groupId: '999',
            title: 'Repeating Event',
            start: '2019-04-16T16:00:00'
          },
          {
            title: 'Conference',
            start: '2019-04-11',
            end: '2019-04-13'
          },
          {
            title: 'Meeting',
            start: '2019-04-12T10:30:00',
            end: '2019-04-12T12:30:00'
          },
          {
            title: 'Lunch',
            start: '2019-04-12T12:00:00'
          },
          {
            title: 'Meeting',
            start: '2019-04-12T14:30:00'
          },
          {
            title: 'Birthday Party',
            start: '2019-04-13T07:00:00'
          },
          {
            title: 'Click for Google',
            url: '/',
            start: '2019-04-28'
          }
        ]
      });

      calendar.render();
    });

I am trying to convert an old Fullcalendar based web app to V4. I can not get dayClick to fire.

I have this CodePen example: https://codepen.io/anon/pen/YMMEyN?&editable=true&editors=001

The example was initialized via a lik=nk from the FC web site. See below. It brings up a dayGridMonth view by default. It includes the interaction plugin but the dayClick method does not fire, no matter what day cell i click in.

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

      var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
        defaultView: 'dayGridMonth',
        defaultDate: '2019-04-07',
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        dayClick: function(info) {
                    alert("dayClick ");
        },
        events: [
          {
            title: 'All Day Event',
            start: '2019-04-01'
          },
          {
            title: 'Long Event',
            start: '2019-04-07',
            end: '2019-04-10'
          },
          {
            groupId: '999',
            title: 'Repeating Event',
            start: '2019-04-09T16:00:00'
          },
          {
            groupId: '999',
            title: 'Repeating Event',
            start: '2019-04-16T16:00:00'
          },
          {
            title: 'Conference',
            start: '2019-04-11',
            end: '2019-04-13'
          },
          {
            title: 'Meeting',
            start: '2019-04-12T10:30:00',
            end: '2019-04-12T12:30:00'
          },
          {
            title: 'Lunch',
            start: '2019-04-12T12:00:00'
          },
          {
            title: 'Meeting',
            start: '2019-04-12T14:30:00'
          },
          {
            title: 'Birthday Party',
            start: '2019-04-13T07:00:00'
          },
          {
            title: 'Click for Google',
            url: 'http://google./',
            start: '2019-04-28'
          }
        ]
      });

      calendar.render();
    });

• javascript
• fullcalendar
• fullcalendar-4

Share Improve this question Follow edited Apr 29, 2019 at 18:09 ADyson 62.2k1616 gold badges7979 silver badges9292 bronze badges asked Apr 29, 2019 at 17:32 7 Reeds7 Reeds 2,57944 gold badges3939 silver badges7070 bronze badges 1

• In v4 and v5, dayClick (fullcalendar.io/docs/v3/dayClick) has effectively been replaced with dateClick (fullcalendar.io/docs/dateClick) – Rich Commented Jan 16, 2022 at 18:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I think you meant dateClick instead of dayClick:

dateClick: function(info) {
    alert("dateClick");
},

for reference: dateClick() docs