How to create events in JavaScript FullCalendar

Tech Area
Last updated on: January 8, 2026

In this tutorial, we have discuss how to create events in JavaScript FullCalendar. We will create an array of events in calendar. 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 and create an array of events.

<script>
   $(document).ready(function() {
   $('#calendar').fullCalendar({
         events: [{
         title: 'Mehndi',
         start: '2023-02-01T09:00',
         end: '2023-02-01T13:00',
         color: 'yellow',
         textColor: 'black'
         },
         {
         title: 'Haldi',
         start: '2023-02-02T15:00',
         end: '2023-02-02T17:00',
         color: 'yellow',
         textColor: 'black'
         },
         {
         title: 'Marriage',
         start: '2023-02-02T18:00',
         end: '2023-02-03T24:00',
         color: 'yellow',
         textColor: 'black'
         }]
});
});
</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({
         events: [{
         title: 'Mehndi',
         start: '2023-02-01T09:00',
         end: '2023-02-01T13:00',
         color: 'yellow',
         textColor: 'black'
         },
         {
         title: 'Haldi',
         start: '2023-02-02T15:00',
         end: '2023-02-02T17:00',
         color: 'yellow',
         textColor: 'black'
         },
         {
         title: 'Marriage',
         start: '2023-02-02T18:00',
         end: '2023-02-03T24:00',
         color: 'yellow',
         textColor: 'black'
         }]
});
});
</script>

Output