FullCalendar Event PHP MySQL Example Tutorial


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.

Recommended Tutorials

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.

Contact
Jassweb, Rai Chak, Punjab, India. 143518
Open chat
Scan the code
Hello 👋
Can we help you?