If you want to integrate jquery fullcalendar with php mysql bootstrap and create, update, fetch, and display event data from the database while doing crud operations with fullcalendar. So it is going to be very easy for you.
Throughout this tutorial, you will learn how to integrate fullCalendar in PHP MySQL bootstrap and perform crud operations from MySQL database in PHP with jQuery FullCalendar. And as well as, you can use or download FullCalendar Event jQuery PHP MySQL Bootstrap free source code
FullCalendar Event jQuery PHP MySQL Bootstrap Example Tutorial
Steps to integrate FullCalendar with PHP, MySQL, Bootstrap, and perform create, fetch, update, and delete event operation with fullcalendar:
- Step 1: Setting up the database
- Step 2: Implement FullCalendar in
index.php - Step 3: Fetch FullCalendar Events from Database
- Step 4: JavaScript Code for FullCalendar Initialization with CRUD Operation
- Step 5: PHP Code for Event Update and Delete
Step 1: Setting up the database
First of all, open your phpmyadmin and execute the following sql queries to create database and table for fullcalendar event with php mysql bootstrap project:
CREATE DATABASE DEMO; CREATE TABLE events ( id INT(11) PRIMARY KEY AUTO_INCREMENT, title VARCHAR(255) NOT NULL, start DATETIME NOT NULL, end DATETIME, description TEXT );
Step 2: Implement FullCalendar in index.php
Now, you need to create index.php file in your php project, which is used to implement fullCalendar events with php mysql bootstrap. So, Create index.php file and Then, add the HTML structure for the calendar container:
<!DOCTYPE html> <html> <head> <title>Event Calendar</title> <!-- Include FullCalendar CSS --> <link rel="stylesheet" href="fullcalendar.css" /> </head> <body> <div id="calendar"></div> <!-- Include FullCalendar JS and other dependencies --> <script src="moment.min.js"></script> <script src="jquery.min.js"></script> <script src="fullcalendar.min.js"></script> <script src="calendar-script.js"></script> </body> </html>
Note that:- Before following the next steps, you need to visit the FullCalendar website (https://fullcalendar.io/) and download the latest version of the library. Extract the files and place them in a directory accessible by your PHP project.
Step 3: Fetch FullCalendar Events from Database
Next, you need to create a PHP file named ‘events.php’ to retrieve events from the database. This script will fetch events from the database and return them as JSON. That’s why add the following code in ‘events.php’:
<?php
// Include your database connection credentials
$dbHost = 'localhost';
$dbUser = 'your_username';
$dbPass = 'your_password';
$dbName = 'event_calendar';
// Create a database connection
$conn = mysqli_connect($dbHost, $dbUser, $dbPass, $dbName);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
// Query to fetch events from the database
$query = "SELECT * FROM events";
$result = mysqli_query($conn, $query);
// Fetch events and store them in an array
$events = array();
while ($row = mysqli_fetch_assoc($result)) {
$events[] = $row;
}
// Convert events array to JSON and output
echo json_encode($events);
// Close the database connection
mysqli_close($conn);
?>
Step 4: JavaScript Code for FullCalendar Initialization with CRUD Operation
Next, you need to create a JavaScript file named ‘calendar-script.js’ to initialize the FullCalendar and fetch events from the PHP script. That’s why add following code in ‘calendar-script.js’:
$(document).ready(function() {
$('#calendar').fullCalendar({
editable: true, // Enable event editing
events: 'events.php', // URL to fetch events from
// Event handlers for editing events
eventDrop: function(event, delta, revertFunc) {
// Event dropped on a new date/time
// Make an AJAX request to update the event in the database
updateEvent(event);
},
eventResize: function(event, delta, revertFunc) {
// Event resized
// Make an AJAX request to update the event in the database
updateEvent(event);
},
eventClick: function(event) {
// Event clicked
// Prompt user to delete the event
if (confirm("Are you sure you want to delete this event?")) {
// Make an AJAX request to delete the event from the database
deleteEvent(event);
}
}
});
});
// Function to update an event in the database
function updateEvent(event) {
var eventData = {
id: event.id,
title: event.title,
start_date: event.start.format(),
end_date: event.end.format()
};
// Make an AJAX request to update the event in the database
$.ajax({
url: 'update-event.php',
data: eventData,
type: 'POST',
success: function(response) {
// Event updated successfully
console.log(response);
},
error: function(xhr, status, error) {
// Error occurred while updating the event
console.log(xhr.responseText);
}
});
}
// Function to delete an event from the database
function deleteEvent(event) {
var eventData = {
id: event.id
};
// Make an AJAX request to delete the event from the database
$.ajax({
url: 'delete-event.php',
data: eventData,
type: 'POST',
success: function(response) {
// Event deleted successfully
console.log(response);
},
error: function(xhr, status, error) {
// Error occurred while deleting the event
console.log(xhr.responseText);
}
});
}
Step 5: PHP Code for Event Update and Delete
Next, you need to create two php files to perform an update and delete events from the database using PHP code or script with jQuery fullCalendar.
So, create two PHP files named ‘update-event.php’ and ‘delete-event.php’.
Firstly, add the following code in ‘update-event.php’:
<?php
// Include your database connection credentials
$dbHost = 'localhost';
$dbUser = 'your_username';
$dbPass = 'your_password';
$dbName = 'event_calendar';
// Create a database connection
$conn = mysqli_connect($dbHost, $dbUser, $dbPass, $dbName);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
// Get event data from the AJAX request
$id = $_POST['id'];
$title = $_POST['title'];
$start_date = $_POST['start_date'];
$end_date = $_POST['end_date'];
// Update the event in the database
$query = "UPDATE events SET title='$title', start_date='$start_date', end_date='$end_date' WHERE id='$id'";
$result = mysqli_query($conn, $query);
if ($result) {
echo "Event updated successfully";
} else {
echo "Error updating event: " . mysqli_error($conn);
}
// Close the database connection
mysqli_close($conn);
?>
Then, add the following code in ‘delete-event.php’:
<?php
// Include your database connection credentials
$dbHost = 'localhost';
$dbUser = 'your_username';
$dbPass = 'your_password';
$dbName = 'event_calendar';
// Create a database connection
$conn = mysqli_connect($dbHost, $dbUser, $dbPass, $dbName);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
// Get event ID from the AJAX request
$id = $_POST['id'];
// Delete the event from the database
$query = "DELETE FROM events WHERE id='$id'";
$result = mysqli_query($conn, $query);
if ($result) {
echo "Event deleted successfully";
} else {
echo "Error deleting event: " . mysqli_error($conn);
}
// Close the database connection
mysqli_close($conn);
?>
Conclusion
That’s it! You have successfully learned how to create a dynamic event calendar using FullCalendar, PHP, and MySQL and perform crud operations with it.
