Fullcalendar Get Event By Id Example

Fullcalendar

Nicesnippets

13811

26-10-2020


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.

Example


<!DOCTYPE html>

<html>

<head>

<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/[email protected]/main.min.css"/>

</head>

<style type="text/css">

#calendar {

width:60%;

margin: 20px auto;

}

</style>

<body>

<div class="container">

<div class="row">

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

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

</div>

</div>

</div>

</body>

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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'

}

]

});

calendar.render();

});

</script>

</html>

It will help you...


Recommended Posts