May 14, 2024
Category : PHP
Bootstrap
jQuery
MySql
JSON
Ajax
PHP MySQL Integrate Fullcalendar Example Tutorial
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');
?>
Read Also: Laravel AJAX CRUD Tutorial Example
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:
Read Also: PHP JQuery Ajax Post Request Example
http://localhost:8000/
I hope it can help you....
;void(0);){kind=link}
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.
Subscribe me on: Youtube
We are Recommending you
- PHP MySQL Column Sorting Example Tutorial
- PHP MongoDB CRUD Operation Example
- PHP MySQL Confirmation Before Delete Record using Ajax Example
- PHP Ajax Form Validation Example Tutorial
- PHP MySQL DataTables Server-side Processing Example
- PHP MySQL Image Gallery CRUD Example
- PHP JQuery Ajax Image Upload Example Tutorial
- PHP Ajax Infinite Scroll Pagination Example
- PHP Ajax Dependent Dropdown List Example
- PHP - Getting Started PHPUnit Test Example
- PHP CRUD Operation Using Ajax and JQuery Example
- PHP JQuery Select2 Ajax Autocomplete Example
- Laravel AJAX CRUD Tutorial Example
;void(0);){kind=link}