Fullcalendar Get Event By Id Example




Hi Guys,

In this blog, I would like to share with you how to get event by id in fullcalendar using jquery. We will show get event by id in fullcalendar. I will learn you how to get event id using jquery in fullcalendar example.

Here i will give you full example for how to get event id using jquery in fullcalendar.


<!DOCTYPE html>



<meta charset="utf-8">

<meta name="viewport" content="width=device-width">

<title>Fullcalendar Get Event By Id Using Jquery Example</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.1/main.min.css"/>


<style type="text/css">

#calendar {


margin: 20px auto;




<div class="container">

<div class="row">

<div class="col-md-12 text-center">

<div id="calendar"></div>





<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.1/main.min.js"></script>

<script src="https://fullcalendar.io/assets/demo-to-codepen.js"></script>

<script type="text/javascript">

document.addEventListener('DOMContentLoaded', function() {

var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {

eventClick: function(info) {

var eventObj = info.event;

if (eventObj.id) {

alert('Clicked Event Id = ' + eventObj.id);

console.log('Clicked Event Id = ' + eventObj.id);



events: [


id: 1,

title: 'simple event',

start: '2020-10-02'



id: 2,

title: 'New Event',

start: '2020-10-03'



id: 12,

title: 'Coming Event',

start: '2020-10-22'








It will help you...