How do I get the ID of an event on eventClick? - fullcalendar

Question

My question is pretty straightforward: I want to load a details page from the database on eventClick. So I just need to know how to access the event attributes on the click.
If my question is in any way ambiguous, please let me know and I'll clarify.
Thank you!

Answer 1

The eventClick function returns the original event and it will preserve the attributes you've set (unless they have the same key as something used internally).
$('#calendar').fullCalendar({
events: [
{
title: 'My Event',
start: '2010-01-01',
myId: 123
}
// other events here
],
eventClick: function(event) {
if (event.myId) {
alert(myId);
}
}
});

Answer 2

For version 5
Source : https://fullcalendar.io/docs/eventClick
eventClick: function(info) {
alert('Event: ' + info.event.title);
alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
alert('View: ' + info.view.type);
// change the border color just for fun
info.el.style.borderColor = 'red';
}

Answer 3

In version 5.11.3, You can do it like this.
First, you have to set id to an event
events: [
{
id: 1,
title: "All Day Event",
start: "2020-09-01",
color: '#FF0000',
},
],
Then you can access it by with event object.event.id
eventClick: function (info) {
alert('Event: ' + info.event.id);
}

Answer 4

You can also pass in info as a parameter to get other values from calendar
eventClick: (info)=> {
alert(info.id); //ID
var eventTitle = info.title; //TITLE
var eventVenue = info.venue; //VENUE
var eventDescription = info.description; //DESCRIPTION
}