Monday, May 27, 2024

How to open bootstrap modal popup on Event Click FullCalendar?

open bootstrap modal popup on Event Click FullCalendar

Hello to all, welcome to 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="">
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=''></script>
<link rel='stylesheet' href="" />

jQuery(document).ready(function($) { 


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-body p").text(event.title);

.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;}

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

<!-- 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.

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.