How to use FullCalendar with MySQL in PHP?
Teams applying “How to use FullCalendar with MySQL in PHP?” in a production project can use vision insurance benefits to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.
Before copying the example into a live application, confirm version-specific behaviour with the official MySQL website and test it against the project’s actual database and runtime.
Apr 13, 2022
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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.....
- How to Increase max_connections in MySQL?
- How to Install the PHP PDO MySQL Extension on Ubuntu 22.04?
- How to Install PHP MySQL on Linux Ubuntu?
- How to Install LEMP Stack Nginx, MySQL, PHP on Ubuntu?
- How to Change MySQL Root User Password Ubuntu?
- PHP 8 MySQL Form Validation Example
- How to Select First Row Only in PHP MySQL?
- How To Backup MySQL Database Using PHP Example