Fullcalendar get Event Date on Click Example

Admin   Jquery   156  2021-03-13 11:50:06

Hi Guys,

In this blog, i am going to teach you how to get event date on click in fullcalendar using jquery. We will show get event date on click in fullcalendar using jquery. This tutorial will give you fullcalendar get event date on click using jquery.

Now let's see example of fullcalendar get date on event click. I will give simple and easy way to get date on event click in fullcalendar using jquery. So let's see the bellow example.

Example

 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

<title>Fullcalendar Get Event Date On Click Example Using Jquery</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.start) {

alert('Clicked' + eventObj.start);

}

},

events: [

{

title: 'simple event',

start: '2020-10-02'

},

{

title: 'New Event',

start: '2020-10-03'

}

]

});

calendar.render();

});

</script>

</html>

It will help you....