Hello to all, welcome to therichpost.com. In this post, I will tell you, How to open bootstrap modal popup on Event Click FullCalendar?

Here is the working code and you can add this into your html file:

<!-- Fullcalendar Starts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.js'></script>
<link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" />

<script>
jQuery(document).ready(function($) { 
   

  $('#calendar').fullCalendar({
                

header: {
 left:   'Calendar',
                center: '',
                right:  'today prev,next'
},
events: [
{ id: '1', resourceId: '1', start: '2019-05-13', end: '2019-05-14', title: 'event 1' },
{ id: '2', resourceId: '1', start: '2019-05-15', end: '2019-05-15', title: 'event 2' },
{ id: '3', resourceId: '2', start: '2019-05-14', end: '2019-05-14', title: 'event 3' }

],
eventClick: function(event) {
$("#successModal").modal("show");
$("#successModal .modal-body p").text(event.title);
}
});
               


});
</script>
<style>
.fc-license-message{display: none;}
body {
margin: 0;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}

#calendar {
max-width: 900px;
margin: 50px auto;
}
.fc-event{cursor: pointer;}

</style>
<div class="container">
<div id='calendar'></div>

<div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="successModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<p></p>
</div>
</div>
</div>
</div>
</div>

<!-- Fullcalendar Ends -->

There are so many tricks in fullcalendar and I will let you know all. Please do comment if you any query related to this post. Thank you. Therichpost.com