Download fullcalendar file from : https://github.com/
<link href='fullcalendar-5.10.2/lib/
<script src='fullcalendar-5.10.2/lib/
document.addEventListener('
var calendarEl = document.getElementById('
var calendar = new FullCalendar.Calendar(
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,
},
events: 'loadevent.php',
},
displayEventTime: false,
selectHelper:true,
weekNumbers: true,
navLinks: true, // can click day/week names to navigate views
nowIndicator: true,
weekNumbers: true,
dayMaxEventRows: true, // for all non-TimeGrid views
views: {
timeGrid: {
dayMaxEventRows: 6 // adjust to 6 only for timeGridWeek/timeGridDay
}
},
});
calendar.render();
});
</script>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 align="center" style=" padding: 3%;"> Calendar Heading</h1>
<div id='calendar'></div>
</div>
</div>
</div>
</body>
$stmt = $con->prepare(" SQL QUERY ");
$stmt->execute();
$result = $stmt->get_result();
while ($row = $result->fetch_assoc()) {
$data[] = array(
'id' => $row["No"],
'title' => $row["title"], // DB ATTRIBUTE NAME FOR TITLE
'end' => $row["DATE2"], // DB END DATE ENTRY in yy-mm-dd 00:00:00 format
'description' => $row[" Description "], // DB Description attribute
);
//result is in row
}
echo json_encode($data);