How to use FullCalendar with MySQL in PHP?

03-Apr-2023

.

Admin

How to use FullCalendar with MySQL in PHP?

Hi friends,

In this post, we will learn how to use a full calendar with MySQL in PHP. I explained simply PHP full calendar with MySQL example. Here you will learn how to implement a PHP event calendar with a MySQL database. This tutorial will give you a simple example of how to insert and fetch full calendar events from PHP MySQL.

I will give you a simple example of how to PHP calendar event management using the full calendar JavaScript library.

So let's see bellow example:

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>How to use Full Calendar with MySQL in PHP? - Nicesnippets.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="#">How to use Full Calendar with MySQL in PHP? - Nicesnippets.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:

I hope it will help you.....

#PHP