FullCalendar Get Event Title Example

Fullcalendar

Nicesnippets

630

28-10-2020


FullCalendar Get Event Title Example

Now let's see example of how to get event title in fullcalendar using jquery. i am going to show you get event title while event click in fullcalendar. we will learn how to get event title on event click fullcalendar using jquery. This article will give you get event title in fullcalendar.

Here i will give you fullexample for how to get event title in fullcalendar using jquery. So let's see the bellow example.

Example


<html>

<head>

<meta charset="utf-8">

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

<title>Fullcalendar Get Event Title 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"/>

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

<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.title) {

alert('Event Name = ' + eventObj.title);

console.log('Event Name = ' + eventObj.title);

}

},

events: [

{

id: 1,

title: 'Simple event',

start: '2020-10-02',

color:'green'

},

{

id: 2,

title: 'New Event',

start: '2020-10-03',

color:'green'

},

{

id: 3,

title: 'Coming Event',

start: '2020-10-22',

color:'green'

}

]

});

calendar.render();

});

</script>

</body>

</html>

It will help you...