fullcalendar- unable to get date of the clicked event

Question

I am setting up a fullcalendar which fetches events from backend and shows it. Also, users can drop events.

What I'm trying to do is to fetch the date of the clicked event. Users can click on an event and delete it. But I want to fetch the date of that event and pass the date to the backend service through an ajax call.

// FullCalendar v1.5
// Script modified from the "theme.html" demo file
$(document).ready(function() {

  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();

  $('#calendar').fullCalendar({
    theme: true,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    editable: true,

    // add event name to title attribute on mouseover
    eventMouseover: function(event, jsEvent, view) {
      if (view.name !== 'agendaDay') {
        $(jsEvent.target).attr('title', event.title);
      }
    },
    eventDestroy: function(event, element, view) {
      alert("removing stuff");
    },
    eventClick: function(date,calEvent, jsEvent, view) {
      alert('Clicked on: ' + date.getDate()+"/"+date.getMonth()+"/"+date.getFullYear());
    //pass it to ajax function. Ajax function comes here
      var r = confirm("Delete " + calEvent.title);
      if (r === true) {
        $('#calendar').fullCalendar('removeEvents', calEvent._id);
      }
    },

    // For DEMO only
    // *************
    events: [{
      title: 'All Day Event',
      start: new Date(y, m, 1)
    }, {
      title: 'Long Event',
      start: new Date(y, m, d - 5),
      end: new Date(y, m, d - 2)
    }, {
      id: 999,
      title: 'Repeating Event',
      start: new Date(y, m, d - 3, 16, 0),
      allDay: false
    }, {
      id: 999,
      title: 'Repeating Event',
      start: new Date(y, m, d + 4, 16, 0),
      allDay: false
    }, {
      title: 'Meeting',
      start: new Date(y, m, d, 10, 30),
      allDay: false
    }, {
      title: 'Lunch',
      start: new Date(y, m, d, 12, 0),
      end: new Date(y, m, d, 14, 0),
      allDay: false
    }, {
      title: 'Birthday Party',
      start: new Date(y, m, d + 1, 19, 0),
      end: new Date(y, m, d + 1, 22, 30),
      allDay: false
    }, {
      title: 'Click for Google',
      start: new Date(y, m, 28),
      end: new Date(y, m, 29),
      url: 'http://google.com/'
    }]
  });

});

I tried to alert the date on event click which I'm not getting. How can I resolve this problem?

FIDDLE

Answer 1

FullCalendar v4 now only has one parameter on the eventClick event:

var calendar = new Calendar(calendarEl, {
      eventClick: function(info) {
          var eventDate = info.event.start; 
          console.log(eventDate);
          //example output: "Wed Oct 02 2019 00:00:00 GMT-0600 (Central Standard Time)"
    },
});

Documentation: eventClick | Event Object

Answer 2

There was an error in the function eventClick function. You defined 4 parameters, but the function only has 3 parameters according to the official documentation. So the parameter you named date was actually the calEvent parameter with the title and _id attribute. I fixed your code and it is now deleting the event.

$(document).ready(function() {

  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();

  $('#calendar').fullCalendar({
    theme: true,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    editable: true,

    // add event name to title attribute on mouseover
    eventMouseover: function(event, jsEvent, view) {
      if (view.name !== 'agendaDay') {
        $(jsEvent.target).attr('title', event.title);
      }
    },
    eventDestroy: function(event, element, view) {
      console.log("removing stuff");
    },
    eventClick: function(calEvent, jsEvent, view) {
      console.log(calEvent.start.format());
      console.log(calEvent);
      alert('Clicked on: ' + calEvent.start.format());
      var r = confirm("Delete " + calEvent.title);
      if (r === true) {
        $('#calendar').fullCalendar('removeEvents', calEvent._id);
      }
    },

    // For DEMO only
    // *************
    events: [{
      title: 'All Day Event',
      start: new Date(y, m, 1)
    }, {
      title: 'Long Event',
      start: new Date(y, m, d - 5),
      end: new Date(y, m, d - 2)
    }, {
      id: 999,
      title: 'Repeating Event',
      start: new Date(y, m, d - 3, 16, 0),
      allDay: false
    }, {
      id: 999,
      title: 'Repeating Event',
      start: new Date(y, m, d + 4, 16, 0),
      allDay: false
    }, {
      title: 'Meeting',
      start: new Date(y, m, d, 10, 30),
      allDay: false
    }, {
      title: 'Lunch',
      start: new Date(y, m, d, 12, 0),
      end: new Date(y, m, d, 14, 0),
      allDay: false
    }, {
      title: 'Birthday Party',
      start: new Date(y, m, d + 1, 19, 0),
      end: new Date(y, m, d + 1, 22, 30),
      allDay: false
    }, {
      title: 'Click for Google',
      start: new Date(y, m, 28),
      end: new Date(y, m, 29),
      url: 'http://google.com/'
    }]
  })
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" />

<div id='calendar'></div>