PHP Full Calendar with MySQL Example
Apr 13, 2022 . Admin

Hello dev,
I am going to explain to you the PHP full calendar with MySQL example. You will learn PHP event calendar with MySQL database.
This article will give you a simple example of how to insert and fetch full calendar events from PHP MySQL. We will use get simple PHP calendar event management using the full calendar JavaScript library.
I will give you a simple example of how to display data in a calendar in PHP MySQL.
So, let's see bellow solution:
db-connect.php<?php $host = 'localhost'; $username = 'root'; $password = ''; $dbname ='my_db'; $conn = new mysqli($host, $username, $password, $dbname); if(!$conn){ die("Cannot connect to the database.". $conn->error); } ?>index.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PHP Full Calendar with MySQL Example -Mywebtuts.com</title> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css"> <style> :root { --bs-success-rgb: 71, 222, 152 !important; } html, body { height: 100%; width: 100%; font-family: Apple Chancery, cursive; } .btn-info.text-light:hover, .btn-info.text-light:focus { background: #000; } table, tbody, td, tfoot, th, thead, tr { border-color: #ededed !important; border-style: solid; border-width: 1px !important; } .title{ font-size: 30px; } </style> </head> <body class="bg-light"> <?php require_once('db-connect.php'); $schedules = $conn->query("SELECT * FROM `schedule_list`"); $sched_res = []; foreach($schedules->fetch_all(MYSQLI_ASSOC) as $row){ $row['sdate'] = date("F d, Y h:i A",strtotime($row['start_datetime'])); $row['edate'] = date("F d, Y h:i A",strtotime($row['end_datetime'])); $sched_res[$row['id']] = $row; } if(isset($conn)) $conn->close(); ?> <nav class="navbar navbar-expand-lg navbar-dark bg-dark bg-gradient" id="topNavBar"> <div class="container d-flex justify-content-center"> <div class="row"> <div class="col-md-12"> <a class="navbar-brand title" href="#">PHP Full Calendar with MySQL Example -Mywebtuts.com</a> </div> </div> </div> </nav> <div class="container py-5" id="page-container"> <div class="row"> <div class="col-md-9"> <div id="calendar"></div> </div> <div class="col-md-3"> <div class="cardt rounded-0 shadow"> <div class="card-header bg-gradient bg-primary text-light"> <h5 class="card-title">Schedule Form</h5> </div> <div class="card-body"> <div class="container-fluid"> <form action="save_schedule.php" method="post" id="schedule-form"> <input type="hidden" name="id" value=""> <div class="form-group mb-2"> <label for="title" class="control-label">Title</label> <input type="text" class="form-control form-control-sm rounded-0" name="title" id="title" required> </div> <div class="form-group mb-2"> <label for="description" class="control-label">Description</label> <textarea rows="3" class="form-control form-control-sm rounded-0" name="description" id="description" required></textarea> </div> <div class="form-group mb-2"> <label for="start_datetime" class="control-label">Start</label> <input type="datetime-local" class="form-control form-control-sm rounded-0" name="start_datetime" id="start_datetime" required> </div> <div class="form-group mb-2"> <label for="end_datetime" class="control-label">End</label> <input type="datetime-local" class="form-control form-control-sm rounded-0" name="end_datetime" id="end_datetime" required> </div> </form> </div> </div> <div class="card-footer"> <div class="text-center"> <button class="btn btn-primary btn-sm rounded-0" type="submit" form="schedule-form"><i class="fa fa-save"></i> Save</button> <button class="btn btn-default border btn-sm rounded-0" type="reset" form="schedule-form"><i class="fa fa-reset"></i> Cancel</button> </div> </div> </div> </div> </div> </div> <!-- Event Details Modal --> <div class="modal fade" tabindex="-1" data-bs-backdrop="static" id="event-details-modal"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content rounded-0"> <div class="modal-header rounded-0"> <h5 class="modal-title">Schedule Details</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body rounded-0"> <div class="container-fluid"> <dl> <dt class="text-muted">Title</dt> <dd id="title" class="fw-bold fs-4"></dd> <dt class="text-muted">Description</dt> <dd id="description" class=""></dd> <dt class="text-muted">Start</dt> <dd id="start" class=""></dd> <dt class="text-muted">End</dt> <dd id="end" class=""></dd> </dl> </div> </div> <div class="modal-footer rounded-0"> <div class="text-end"> <button type="button" class="btn btn-primary btn-sm rounded-0" id="edit" data-id="">Edit</button> <button type="button" class="btn btn-danger btn-sm rounded-0" id="delete" data-id="">Delete</button> <button type="button" class="btn btn-secondary btn-sm rounded-0" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js"></script> <script src="script.js"></script> <script> var scheds = $.parseJSON('<?= json_encode($sched_res) ?>') </script> </body> </html>script.js
var calendar; var Calendar = FullCalendar.Calendar; var events = []; $(function() { if (!!scheds) { Object.keys(scheds).map(k => { var row = scheds[k] events.push({ id: row.id, title: row.title, start: row.start_datetime, end: row.end_datetime }); }); } var date = new Date() var d = date.getDate(), m = date.getMonth(), y = date.getFullYear(), calendar = new Calendar(document.getElementById('calendar'), { headerToolbar: { left: 'prev,next today', right: 'dayGridMonth,dayGridWeek,list', center: 'title', }, selectable: true, themeSystem: 'bootstrap', events: events, eventClick: function(info) { var details = $('#event-details-modal'); var id = info.event.id; if (!!scheds[id]) { details.find('#title').text(scheds[id].title); details.find('#description').text(scheds[id].description); details.find('#start').text(scheds[id].sdate); details.find('#end').text(scheds[id].edate); details.find('#edit,#delete').attr('data-id', id); details.modal('show'); } else { alert("Event is undefined"); } }, eventDidMount: function(info) { // Do Something after events mounted }, editable: true }); calendar.render(); // Form reset listener $('#schedule-form').on('reset', function() { $(this).find('input:hidden').val(''); $(this).find('input:visible').first().focus(); }); // Edit Button $('#edit').click(function() { var id = $(this).attr('data-id'); if (!!scheds[id]) { var form = $('#schedule-form'); console.log(String(scheds[id].start_datetime), String(scheds[id].start_datetime).replace(" ", "\\t")); form.find('[name="id"]').val(id); form.find('[name="title"]').val(scheds[id].title); form.find('[name="description"]').val(scheds[id].description); form.find('[name="start_datetime"]').val(String(scheds[id].start_datetime).replace(" ", "T")); form.find('[name="end_datetime"]').val(String(scheds[id].end_datetime).replace(" ", "T")); $('#event-details-modal').modal('hide'); form.find('[name="title"]').focus(); } else { alert("Event is undefined"); } }); // Delete Button / Deleting an Event $('#delete').click(function() { var id = $(this).attr('data-id'); if (!!scheds[id]) { var _conf = confirm("Are you sure to delete this scheduled event?"); if (_conf === true) { location.href = "./delete_schedule.php?id=" + id; } } else { alert("Event is undefined"); } }); });save_schedule.php
<?php require_once('db-connect.php'); if($_SERVER['REQUEST_METHOD'] !='POST'){ echo "<script> alert('Error: No data to save.'); location.replace('./') </script>"; $conn->close(); exit; } extract($_POST); $allday = isset($allday); if(empty($id)){ $sql = "INSERT INTO `schedule_list` (`title`,`description`,`start_datetime`,`end_datetime`) VALUES ('$title','$description','$start_datetime','$end_datetime')"; }else{ $sql = "UPDATE `schedule_list` set `title` = '{$title}', `description` = '{$description}', `start_datetime` = '{$start_datetime}', `end_datetime` = '{$end_datetime}' where `id` = '{$id}'"; } $save = $conn->query($sql); if($save){ echo "<script> alert('Schedule Successfully Saved.'); location.replace('./') </script>"; }else{ echo "<pre>"; echo "An Error occured.<br>"; echo "Error: ".$conn->error."<br>"; echo "SQL: ".$sql."<br>"; echo "</pre>"; } $conn->close(); ?>delete_schedule.php
<?php require_once('db-connect.php'); if(!isset($_GET['id'])){ echo "<script> alert('Undefined Schedule ID.'); location.replace('./') </script>"; $conn->close(); exit; } $delete = $conn->query("DELETE FROM `schedule_list` where id = '{$_GET['id']}'"); if($delete){ echo "<script> alert('Event has deleted successfully.'); location.replace('./') </script>"; }else{ echo "<pre>"; echo "An Error occured.<br>"; echo "Error: ".$conn->error."<br>"; echo "SQL: ".$sql."<br>"; echo "</pre>"; } $conn->close(); ?>Output:

It will help you...