javascript - fullcalendar- unable to get date of the clicked event

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: '/'
    }]
  });

});

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

FIDDLE

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

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

Share Improve this question asked Jan 5, 2017 at 7:31 Smokey 1,8976 gold badges34 silver badges64 bronze badges

I can use this code to get date when i click on a day. But I wanna fetch the date when I click on an event. dayClick: function(date, jsEvent, view) { alert('Clicked on: ' + date.getDate()+"/"+date.getMonth()+"/"+date.getFullYear()); } – Smokey Commented Jan 5, 2017 at 7:38
See my solution below. dt is where I am storing the date retrieved from the calendar. – Kraang Prime Commented Jan 5, 2017 at 7:51

Add a comment |

5 Answers 5

Sorted by: Reset to default 8

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

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>

Try replacing the eventClick with :

eventClick: function(calEvent, jsEvent, view) {
   var dt = calEvent.start;
    //alert('Event Clicked on : ' + dt);
    var r = confirm("Delete " + calEvent.title + "\n" + dt);
    if (r === true) {
       $('#calendar').fullCalendar('removeEvents', calEvent._id);
    }
},

Reference : fullcalendar.io - eventClick

Here it is

The data object has a start parameter. date.start.getDate()

http://jsfiddle.net/0o2ybsLu/3/

// 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) {
    console.log(date.start.getDate());
      alert('Clicked on: ' + date.start.getDate()+"/"+date.start.getMonth()+"/"+date.start.getFullYear());
      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/'
    }]
  });

});

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
      
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://dl.dropboxusercontent.com/u/1510510/temp/demo/fullcalendar.css" rel="stylesheet"/>
<script src="https://dl.dropboxusercontent.com/u/1510510/temp/demo/fullcalendar.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" rel="stylesheet"/>
    </head>
    <body>
        <div id='calendar'></div>
    </body>
</html>

eventClick: function(date, calEvent, jsEvent, view) {
  var eventDate = moment(date.start).format("YYYY-MM-DD"); 
  alert(eventDate);
},

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - fullcalendar- unable to get date of the clicked event - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)