Home Bootstrap How to open bootstrap modal popup on Event Click FullCalendar?

How to open bootstrap modal popup on Event Click FullCalendar?

by therichpost
Published: Last Updated on 19 comments
fullcalendar

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

You may also like

19 comments

jasmeen June 7, 2018 - 4:39 am

Very helpful

Reply
therichpost June 7, 2018 - 2:55 pm

Thank you jasmeen

Reply
asdfasd June 19, 2018 - 1:27 pm

asfgasdfass

Reply
don November 23, 2018 - 6:31 am

thaaaaaaaaaaaaaank u!

Reply
Ajay Malhotra November 24, 2018 - 8:21 am

Welcome don 🙂

Reply
Mel Anthony March 20, 2019 - 2:48 pm

Hi, I need help connecting this event calendar to database mysql. can you show us how? thanks in advance. 🙂

Reply
daooji katara January 13, 2021 - 10:34 am

thanku for greate help

Reply
Ajay Malhotra January 13, 2021 - 4:42 pm

Welcome 🙂

Reply
wee yaw May 10, 2021 - 1:10 am

How do i put more details into the modal sir ?

Reply
Ajay Malhotra May 10, 2021 - 5:56 am

More details like?

Reply
James July 19, 2021 - 8:56 am

How can i add in images into the modal sir ?

Reply
Ajay Malhotra July 19, 2021 - 8:58 am

Yes we can add images inside modal by adding img tag.

Reply
Wee Yaw July 19, 2021 - 9:05 am

Or is there an example that i can learn ?

Reply
Ajay Malhotra July 19, 2021 - 9:36 am

https://therichpost.com/angular-8-enlarge-image-in-custom-bootstrap-modal/
See this working demo. I have added images inside modal popup.

Reply
Wee Yaw July 20, 2021 - 2:09 pm

Where is the demo sir ?

James July 19, 2021 - 9:12 am

Is there an example for this method sir ?

Reply
Jackson March 8, 2023 - 6:45 am

how to add a dropdown list for years and months?

Reply

Leave a Comment

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