FullCalendar.js plugin is a javascript event calendar and this plugin we can use any web technology and it is easy to use any server-side script like PHP, ASP, JSP, etc. It is a JavaScript-based calendar but after a little tweaking, we can use it with PHP with databases like Mysql also. It is a jquery library and it displays a full-featured calendar on a web page with events like adding a new date, updating an old date, deleting an old date with attractive steps.
Fullcalendar is a jquery library that provides us with a display a 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 anything that related date to date, at that time if you use event calendar like fullcalendar then it’s better.
So to know the steps of How To Add Fullcalandar.io In PHP and MySql? or How to use FullCalendar.js plugin with PHP for saving your meeting or event on a particular date and time. So in this post, we have discussed How to Integrate Jquery FullCalendar Plugin with PHP server-side script and Mysql database table.
Table of Contents
How To Add Fullcalendar.io In PHP and MySql?
Follow the below steps respectively, create the file with the below codes and rename it perfectly. Also follow the rest of the changes in the end like files path etc.
HTML/JavaScript/CSS:
First, add <div id="calendar"></div> where you want to show the FullCalender. After that copy the below code and past it at the end of that web page or after previous code. Also change the pather of load.php, insert.php, delete.php & update.php from where you put them.
<!-- FullCalender.io -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.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 type="text/javascript">
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: 'fullcalender.io/load.php',
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt("Enter 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: "fullcalender.io/insert.php",
type: "POST",
data: {
title: title,
start: start,
end: end
},
success: function() {
calendar.fullCalendar('refetchEvents');
alert("Added Successfully");
}
})
}
},
editable: true,
eventResize: function(event) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var id = event.id;
$.ajax({
url: "fullcalender.io/update.php",
type: "POST",
data: {
title: title,
start: start,
end: end,
id: id
},
success: function() {
calendar.fullCalendar('refetchEvents');
alert('Event Update');
}
})
},
eventDrop: function(event) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var id = event.id;
$.ajax({
url: "fullcalender.io/update.php",
type: "POST",
data: {
title: title,
start: start,
end: end,
id: id
},
success: function() {
calendar.fullCalendar('refetchEvents');
alert("Event Updated");
}
});
},
eventClick: function(event) {
if (confirm("Are you sure you want to remove it?")) {
var id = event.id;
$.ajax({
url: "fullcalender.io/delete.php",
type: "POST",
data: {
id: id
},
success: function() {
calendar.fullCalendar('refetchEvents');
alert("Event Removed");
}
})
}
},
});
});
</script>
<!-- FullCalender.io -->
SQL Database (data.sql):
-- -- Database: `testing` -- -- -------------------------------------------------------- -- -- Table structure for table `events` -- CREATE TABLE IF NOT EXISTS `events` ( `id` int(11) NOT NULL, `title` varchar(255) NOT NULL, `start_event` datetime NOT NULL, `end_event` datetime NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Indexes for dumped tables -- -- -- Indexes for table `events` -- ALTER TABLE `events` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `events` -- ALTER TABLE `events` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
Event Loading From Database (load.php):
<?php
/****************************************************************************/
// Database Connection
/****************************************************************************/
$connectionPDO= new PDO('mysql:host=localhost;dbname=testing', 'root', '');
/****************************************************************************/
// FullCalender.io Load Function
/****************************************************************************/
$data = array();
$query = "SELECT * FROM events ORDER BY id";
$statement = $connectionPDO->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row) {
$data[] = array(
'id' => $row["id"],
'title' => $row["title"],
'start' => $row["start_event"],
'end' => $row["end_event"]
);
}
echo json_encode($data);
/****************************************************************************/
// Database Connection Close
/****************************************************************************/
$connectionPDO = null;
?>
Insert Event In Database (insert.php):
<?php
/****************************************************************************/
// Database Connection
/****************************************************************************/
$connectionPDO= new PDO('mysql:host=localhost;dbname=testing', 'root', '');
/****************************************************************************/
// FullCalender.io Insert Function
/****************************************************************************/
if(isset($_POST["title"])) {
$query = "INSERT INTO events (title, start_event, end_event) VALUES (:title, :start_event, :end_event)";
$statement = $connectionPDO->prepare($query);
$statement->execute(
array(
':title' => $_POST['title'],
':start_event' => $_POST['start'],
':end_event' => $_POST['end']
)
);
}
/****************************************************************************/
// Database Connection Close
/****************************************************************************/
$connectionPDO = null;
?>Update Event In Database (update.php):
<?php
/****************************************************************************/
// Database Connection
/****************************************************************************/
$connectionPDO= new PDO('mysql:host=localhost;dbname=testing', 'root', '');
/****************************************************************************/
// FullCalender.io Update Function
/****************************************************************************/
if(isset($_POST["id"])) {
$query = "UPDATE events SET title=:title, start_event=:start_event, end_event=:end_event WHERE id=:id";
$statement = $connectionPDO->prepare($query);
$statement->execute(
array(
':title' => $_POST['title'],
':start_event' => $_POST['start'],
':end_event' => $_POST['end'],
':id' => $_POST['id']
)
);
}
/****************************************************************************/
// Database Connection Close
/****************************************************************************/
$connectionPDO = null;
?>Delete Event In Database (delete.php):
<?php
/****************************************************************************/
// Database Connection
/****************************************************************************/
$connectionPDO= new PDO('mysql:host=localhost;dbname=testing', 'root', '');
/****************************************************************************/
// FullCalender.io Delete Function
/****************************************************************************/
if(isset($_POST["id"])) {
$query = "DELETE from events WHERE id=:id";
$statement = $connectionPDO->prepare($query);
$statement->execute(
array(
':id' => $_POST['id']
)
);
}
/****************************************************************************/
// Database Connection Close
/****************************************************************************/
$connectionPDO = null;
?>Do not forget to change database connection string parameters.
Final Words:
Be aware that the is placed well in your document. Rest all is in your hand if you want to customize it or play with it. That’s all we have. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allowed to us. Don’t forget to share this with your friends so they can also take benefit from it and leave.
Be the first to write a comment.