How to make calendar clickable, open alert box, modal on click in FullCalendar

Tech Area
April 11, 2023

In this post, we will learn how to use JavaScript FullCalendar in website and how to make our calendar clickable and we will discuss how to open alert box and modal on mouse click in javascript fullcalendar. If you are working on event management website like schedule any event or plan any task on particular date and that details you want to show on web page in calendar format, then you can achieve this task using JavaScript FullCalendar plugin.

First of all include necessary CSS and JavaScript library.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Now create body for calendar.

<body>
  <h2><center>Javascript Fullcalendar</center></h2>
  <div class="container">
   <div id="calendar"></div>
  </div>
  <br>
</body>

After this, create script for calendar loading and make calendar clickable.

<script>
   $(document).ready(function() {
   $('#calendar').fullCalendar({
           selectable: true,
           selectHelper: true,
           select: function()
           {
               $('#myModal').modal('toggle');
           },
           header:
           {
           left: 'month, agendaWeek, agendaDay, list',
           center: 'title',
           right: 'prev, today, next'
           },
           buttonText:
           {
           today: 'Today',
           month: 'Month',
           week: 'Week',
           day: 'Day',
           list: 'List'
           }
});
});
</script>

 <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Create Event</h4>
        </div>
        <div class="modal-body">
          <input type="text" class="form-control">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
     </div>
  </div>

Source Code

Here is the full code that we have written for index.php.

<html>  
<head>  
    <title>Fullcalendar</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
 <body>
  <h2><center>Javascript Fullcalendar</center></h2>
  <div class="container">
   <div id="calendar"></div>
  </div>
  <br>
</body>
</html>
<script>
   $(document).ready(function() {
   $('#calendar').fullCalendar({
           selectable: true,
           selectHelper: true,
           select: function()
           {
               $('#myModal').modal('toggle');
           },
           header:
           {
           left: 'month, agendaWeek, agendaDay, list',
           center: 'title',
           right: 'prev, today, next'
           },
           buttonText:
           {
           today: 'Today',
           month: 'Month',
           week: 'Week',
           day: 'Day',
           list: 'List'
           }
});
});
</script>

 <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Create Event</h4>
        </div>
        <div class="modal-body">
          <input type="text" class="form-control">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
     </div>
  </div>

Output