PHP MySQL Integrate Fullcalendar Example Tutorial

By Hardik Savani November 5, 2023 Category : PHP Bootstrap jQuery MySql JSON Ajax

Today, i would like to share with you integration of jquery full calendar events crud operation using bootstrap, php & mysql example.

Fullcalendar is jquery library that provide us to display calendar with events and more. Fullcalendar js provide year, month, week and day calendar for displaying and it amazing with drag & drop events management. If you are working on event management, task management or any thing that related date to date, at that time if you use event calendar like fullcalendar then it's better.

In this example we will create "events" table in mysql database and create crud operation using jquery ajax like as bellow.

1)Event Lists

2)Create Event

3)Update Event

4)Delete Event

So, let's follow full example of fullcalendar events example using php mysql. After follow all step you will get layout as like bellow:

Preview:

Step 1: Create events table

In this step we will create new new table "events" in database. You can use following SQL Query for create "events" table. So let's create using bellow SQL query:

item table:


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

Step 2: Create DB Configuration File

In this step, we require to create database configuration file, here we will set database name, username and password. So let's create "db_config.php" file on your root directory and put bellow code:

db_config.php


<?php

$bdd = new PDO('mysql:host=localhost;dbname=laravel_test', 'root', 'root');

?>

Step 3: Create View File

In this step we will create index.php view file, that will be render full calendar layout. In this file we will write jquery code and ajax code. In this file i used following css and js files :

1)fullcalendar.css

2)bootstrap.css

3)jquery.min.js

4)moment.min.js

5)fullcalendar.min.js

Now let's create index.php file and put bellow code:

index.php


<!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>Full calendar php mysql example</h2>
 <br/>
 <div id='calendar'></div>
</body>

</html>

Step 4: Create Ajax File

In last step we will create four files for ajax method and there are listed bellow:

1)events.php

2)add_events.php

3)delete_event.php

4)update_events.php

Now we will create those four files and put bellow code for this file one by one:

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));

?>

Ok, now we are ready to run our Full Calendar example. So let's run bellow command on your root directory for quick run:

php -S localhost:8000

Now you can open bellow URL on your browser:

http://localhost:8000/

I hope it can help you....

Tags :

Laravel User Ban/Revoke Functionality Example

*Hire Me

Hardik Savani

I'm a full-stack developer, entrepreneur and owner of ItSolutionstuff.com. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.

Follow Me:

PHP MySQL Integrate Fullcalendar Example Tutorial

Laravel User Ban/Revoke Functionality Example

Laravel Custom User Log Activity Example Tutorial

Hardik Savani

We are Recommending you

Popular Posts

Categories

Latest Posts