PHP Mysql Crud Integrate Fullcalendar Example -- ItErrorSolution.com

PHP Mysql Crud Integrate Fullcalendar Example

May 13, 2024 | PHP jQuery MySql Bootstrap Javascript Ajax

Hello Dev,

Today, I want to discuss integrating jQuery FullCalendar for CRUD operations using Bootstrap, PHP, and MySQL.

FullCalendar is a jQuery library that enables the display of calendars with events and offers features like year, month, week, and day views. It's particularly impressive with its drag-and-drop event management capabilities. If you're dealing with event or task management or anything that involves dates, using an event calendar like FullCalendar is highly beneficial.

In this example, we'll set up an "events" table in a MySQL database and implement CRUD operations using jQuery AJAX.

Read Also: jQuery Ajax X-editable bootstrap plugin to update records in PHP Example

To integrate jQuery FullCalendar with CRUD operations using Bootstrap, PHP, and MySQL, follow these steps. This guide will help you create an event management system where you can add, edit, and delete events directly from the calendar.

Step 1: Create the Database and Table

First, create a MySQL database and a table named events. Use the following SQL query to create the table:

CREATE TABLE `events` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) COLLATE utf8_bin NOT NULL,
  `start` datetime NOT NULL,
  `end` datetime DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

Step 2: Database Configuration

Create a db_config.php file to configure your database connection:

<?php
$bdd = new PDO('mysql:host=localhost;dbname=your_database_name', 'username', 'password');
?>

Replace your_database_name, username, and password with your actual database details.

Step 3: Create the FullCalendar Layout

Create an index.php file to render the FullCalendar layout. Include the necessary CSS and JS files for FullCalendar, Bootstrap, and jQuery:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<script>

 $(document).ready(function() {
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();

  var calendar = $('#calendar').fullCalendar({
   editable: true,
   header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
   },


   events: "events.php",


   eventRender: function(event, element, view) {
    if (event.allDay === 'true') {
     event.allDay = true;
    } else {
     event.allDay = false;
    }
   },
   selectable: true,
   selectHelper: true,
   select: function(start, end, allDay) {
   var title = prompt('Event Title:');


   if (title) {
   var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
   var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
   $.ajax({
       url: 'add_events.php',
       data: 'title='+ title+'&start='+ start +'&end='+ end,
       type: "POST",
       success: function(json) {
       alert('Added Successfully');
       }
   });
   calendar.fullCalendar('renderEvent',
   {
       title: title,
       start: start,
       end: end,
       allDay: allDay
   },
   true
   );
   }
   calendar.fullCalendar('unselect');
   },


   editable: true,
   eventDrop: function(event, delta) {
   var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
   var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
   $.ajax({
       url: 'update_events.php',
       data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
       type: "POST",
       success: function(json) {
        alert("Updated Successfully");
       }
   });
   },
   eventClick: function(event) {
    var decision = confirm("Do you really want to do that?"); 
    if (decision) {
    $.ajax({
        type: "POST",
        url: "delete_event.php",
        data: "&id=" + event.id,
         success: function(json) {
             $('#calendar').fullCalendar('removeEvents', event.id);
              alert("Updated Successfully");}
    });
    }
    },
   eventResize: function(event) {
       var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
       var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
       $.ajax({
        url: 'update_events.php',
        data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
        type: "POST",
        success: function(json) {
         alert("Updated Successfully");
        }
       });
    }
   
  });
 });
</script>
<style>
    body {
        margin-top: 40px;
        text-align: center;
        font-size: 14px;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    }
    #calendar {
        width: 650px;
        margin: 0 auto;
    }
</style>
</head>
<body>
    <h2>PHP Mysql Crud Integrate Fullcalendar Example -- ItErrorSolution.com</h2>
    <br/>
    <div id='calendar'></div>
</body>
</html>

Read Also: How To Create a Responsive Menu Using Html, Css and Jquery? Step 4: Create PHP Scripts for CRUD Operations

You'll need to create several PHP scripts to handle the CRUD operations:

fetch_events.php: Fetches events from the database.

add_event.php: Adds a new event to the database.

update_event.php: Updates an existing event in the database.

delete_event.php: Deletes an event from the database.

Here's an example of what fetch_events.php might look like:

events.php

<?php
    $json = array();
    $requete = "SELECT * FROM events ORDER BY id";
    try {
    require "db_config.php";
    } catch(Exception $e) {
    exit('Unable to connect to database.');
    }

    $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
 echo json_encode($resultat->fetchAll(PDO::FETCH_ASSOC));
?>

add_events.php

<?php

$title = $_POST['title'];
$start = $_POST['start'];
$end = $_POST['end'];

try {
    require "db_config.php";
} catch(Exception $e) {
    exit('Unable to connect to database.');
}

$sql = "INSERT INTO events (title, start, end) VALUES (:title, :start, :end )";
$q = $bdd->prepare($sql);
$q->execute(array(':title'=>$title, ':start'=>$start, ':end'=>$end));
?>

delete_event.php

<?php

$id = $_POST['id'];

try {
    require "db_config.php";
} catch(Exception $e) {
    exit('Unable to connect to database.');
}

$sql = "DELETE from events WHERE id=".$id;
$q = $bdd->prepare($sql);
$q->execute();
?>

update_events.php

<?php

$id = $_POST['id'];
$title = $_POST['title'];
$start = $_POST['start'];
$end = $_POST['end'];

try {
    require "db_config.php";
} catch(Exception $e) {
    exit('Unable to connect to database.');
}

$sql = "UPDATE events SET title=?, start=?, end=? WHERE id=?";
$q = $bdd->prepare($sql);
$q->execute(array($title,$start,$end,$id));

?>

You'll need to create similar scripts for adding, updating, and deleting events, adjusting the SQL queries accordingly.

Conclusion

This guide provides a basic overview of integrating jQuery FullCalendar with CRUD operations using Bootstrap, PHP, and MySQL. You'll need to adapt the PHP scripts to match your database schema and ensure that all AJAX calls are correctly configured to communicate with your server-side scripts.

Output: PHP Mysql Crud Integrate Fullcalendar Example

Thank you for your encouragement! If you have any questions or need further assistance, feel free to ask. I'm here to help!

Tags :

#PHP

#jQuery

#MySql

#Bootstrap

#Javascript

#Ajax

ItErrorSolution.com

"Hey there! I'm a full-stack developer and proud owner of ItErrorSolution.com, based right here in India. I love nothing more than sharing handy tips and tricks with my fellow developers through easy-to-follow tutorials. When it comes to coding, I'm all about PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, CodeIgniter, and Bootstrap – been hooked on them forever! I'm all about putting in the work and staying committed. Ready to join me on this journey to coding?"