Home Bootstrap How to open bootstrap modal popup on dayClick FullCalendar?

How to open bootstrap modal popup on dayClick FullCalendar?

by therichpost
Published: Last Updated on 2 comments

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

Here is the workin 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" />

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

dayClick: function(event) {
$("#successModal .modal-body p").text("Day Clicked!");

.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. Therichpost.com

You may also like


alexa March 20, 2018 - 10:06 am

good code

Ajay Malhotra December 18, 2018 - 4:58 am

Thank you


Leave a Comment

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