How to use JavaScript FullCalendar

Tech Area
January 24, 2023

In this post, we have discuss how to use JavaScript FullCalendar in website. 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>

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.

<script>
   $(document).ready(function() {
   $('#calendar').fullCalendar();
});
</script>

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> 
</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();
});
</script>

Output