August 1, 2019

jQuery Event Booking Using FullCalendar With PHP

In this article, we going to see an event booking using a full calendar with jQuery and PHP. Here we used fullcalender.js plugin, using this calendar plugin you have multiple options to book a meeting, birthday function, marriage function, etc., whatever you like you can use the calendar plugin and store the information in MySQL. This calendar plugin having three types of option to book an event Month, Week and Day-wise you can book events.

If you looking for an event booking management with storing data in MySQL database? Here you have a solution for that, you can schedule a meeting or plan with the full calendar plugin. With the help of jQuery plugin here we are inserting event title this will automatically calculate time from 12 AM to 12 PM once the event is booked for the particular time then you can’t book on the same date and time. The event will calculate with start date and end date If you booked an event in the wrong data you can drag and change the date of booking this will automatically update in the calendar as well in database. For deleting the event you need to click on the booked date, once you clicked then you get popup box ok or cancel ok to delete the event.

jQuery Event Booking Process

First, we have to fetch data from database and display on the calendar, for fetch data from MySQL here we used events method. This process will happen through JSON string format and then only the booking date will display on the calendar. Once you adding a new event now you like to change the date or time of the particular event, here we have eventResize and eventDrop method, by using this method we can change date and time of the event and finally, we want to remove particular event we used eventClick method, by using this method when we have click on any event this it will trigger ajax request for remove event data from MySQL database. The below code will help you to integrate into your project.

Database

--
-- Table structure for table `events`
--

CREATE TABLE `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;

--
-- Dumping data for table `events`
--

INSERT INTO `events` (`id`, `title`, `start_event`, `end_event`) VALUES
(1, 'Birthday Function', '2019-08-15 00:00:00', '2019-08-16 00:00:00'),
(2, 'Marriage Party', '2019-08-06 00:00:00', '2019-08-07 00:00:00'),
(3, 'Live Drama', '2019-08-27 00:00:00', '2019-08-30 00:00:00'),
(4, 'Business Meeting', '2019-08-18 00:00:00', '2019-08-20 00:00:00');

--
-- 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, AUTO_INCREMENT=18;
COMMIT;

-- Table structure for table `events`

CREATE TABLE `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;

-- Dumping data for table `events`

INSERT INTO `events` (`id`, `title`, `start_event`, `end_event`) VALUES

(1, 'Birthday Function', '2019-08-15 00:00:00', '2019-08-16 00:00:00'),

(2, 'Marriage Party', '2019-08-06 00:00:00', '2019-08-07 00:00:00'),

(3, 'Live Drama', '2019-08-27 00:00:00', '2019-08-30 00:00:00'),

(4, 'Business Meeting', '2019-08-18 00:00:00', '2019-08-20 00:00:00');

-- 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, AUTO_INCREMENT=18;

COMMIT;

conn.php

<?php
 $host = "localhost";  
 $db_user = "root";  
 $db_pass = "";  
 $dbname = "tut";  

 $connect = new PDO("mysql:host=$host; dbname=$dbname", $db_user, $db_pass); 
?>

<?php

$host = "localhost";

$db_user = "root";

$db_pass = "";

$dbname = "tut";

$connect = new PDO("mysql:host=$host; dbname=$dbname", $db_user, $db_pass);

index.php

<!DOCTYPE html>
<html>

<head>
    <title>jQuery Event Booking Using Fullcalendar With PHP</title>
    <link rel="stylesheet" href="css/fullcalendar.css" />
    <link rel="stylesheet" href="css/style.css" />

</head>

<body>
    <br />
    <h1 align="center">jQuery Event Booking Using Fullcalendar With PHP</h1>
    <br />
    <div class="booking">
        <div id="event_calendar"></div>
    </div>

    <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 calendar = $('#event_calendar').fullCalendar({
                editable: true,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                events: 'fetch.php',
                selectable: true,
                selectHelper: true,
                select: function(start, end, allDay) {
                    var title = prompt("Enter Event Name");
                    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: "insert.php",
                            type: "POST",
                            data: {
                                title: title,
                                start: start,
                                end: end
                            },
                            success: function() {
                                calendar.fullCalendar('refetchEvents');
                                alert("Event Booked 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: "update.php",
                        type: "POST",
                        data: {
                            title: title,
                            start: start,
                            end: end,
                            id: id
                        },
                        success: function() {
                            calendar.fullCalendar('refetchEvents');
                            alert('Event Updated Successfully');
                        }
                    })
                },

                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: "update.php",
                        type: "POST",
                        data: {
                            title: title,
                            start: start,
                            end: end,
                            id: id
                        },
                        success: function() {
                            calendar.fullCalendar('refetchEvents');
                            alert("Event Updated Successfully");
                        }
                    });
                },

                eventClick: function(event) {
                    if (confirm("Are you sure you want to cancel the event?")) {
                        var id = event.id;
                        $.ajax({
                            url: "delete.php",
                            type: "POST",
                            data: {
                                id: id
                            },
                            success: function() {
                                calendar.fullCalendar('refetchEvents');
                                alert("Event Removed Successfully");
                            }
                        })
                    }
                },

            });
        });
    </script>
</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

<!DOCTYPE html>

<html>

<head>

<title>jQuery Event Booking Using Fullcalendar With PHP</title>

</head>

<body>

<br />

<h1 align="center">jQuery Event Booking Using Fullcalendar With PHP</h1>

<br />

</div>

$(document).ready(function() {

var calendar = $('#event_calendar').fullCalendar({

editable: true,

header: {

left: 'prev,next today',

center: 'title',

right: 'month,agendaWeek,agendaDay'

events: 'fetch.php',

selectable: true,

selectHelper: true,

select: function(start, end, allDay) {

var title = prompt("Enter Event Name");

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: "insert.php",

type: "POST",

data: {

title: title,

start: start,

end: end

success: function() {

calendar.fullCalendar('refetchEvents');

alert("Event Booked 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: "update.php",

type: "POST",

data: {

title: title,

start: start,

end: end,

id: id

success: function() {

calendar.fullCalendar('refetchEvents');

alert('Event Updated Successfully');

}

})

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: "update.php",

type: "POST",

data: {

title: title,

start: start,

end: end,

id: id

success: function() {

calendar.fullCalendar('refetchEvents');

alert("Event Updated Successfully");

}

});

eventClick: function(event) {

if (confirm("Are you sure you want to cancel the event?")) {

var id = event.id;

$.ajax({

url: "delete.php",

type: "POST",

data: {

id: id

success: function() {

calendar.fullCalendar('refetchEvents');

alert("Event Removed Successfully");

}

})

}

});

</script>

</body>

</html>

fetch.php

<?php
include ('conn.php');

$data = array();

$query = "SELECT * FROM events ORDER BY id";

$statement = $connect->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);

?>

<?php

include ('conn.php');

$data = array();

$query = "SELECT * FROM events ORDER BY id";

$statement = $connect->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);

insert.php

<?php
include ('conn.php');

if (isset($_POST["title"]))
{
    $query = "
 INSERT INTO events 
 (title, start_event, end_event) 
 VALUES (:title, :start_event, :end_event)
 ";
    $statement = $connect->prepare($query);
    $statement->execute(array(
        ':title' => $_POST['title'],
        ':start_event' => $_POST['start'],
        ':end_event' => $_POST['end']
    ));
}

?>

<?php

include ('conn.php');

if (isset($_POST["title"]))

{

$query = "

INSERT INTO events

(title, start_event, end_event)

VALUES (:title, :start_event, :end_event)

$statement = $connect->prepare($query);

$statement->execute(array(

':title' => $_POST['title'],

':start_event' => $_POST['start'],

':end_event' => $_POST['end']

));

}

update.php

<?php
include ('conn.php');

if (isset($_POST["id"]))
{
    $query = "
 UPDATE events 
 SET title=:title, start_event=:start_event, end_event=:end_event 
 WHERE id=:id
 ";
    $statement = $connect->prepare($query);
    $statement->execute(array(
        ':title' => $_POST['title'],
        ':start_event' => $_POST['start'],
        ':end_event' => $_POST['end'],
        ':id' => $_POST['id']
    ));
}

?>

<?php

include ('conn.php');

if (isset($_POST["id"]))

{

$query = "

UPDATE events

SET title=:title, start_event=:start_event, end_event=:end_event

WHERE id=:id

$statement = $connect->prepare($query);

$statement->execute(array(

':title' => $_POST['title'],

':start_event' => $_POST['start'],

':end_event' => $_POST['end'],

':id' => $_POST['id']

));

}

delete.php

<?php
if (isset($_POST["id"]))
{
    include ('conn.php');
    $query = "
 DELETE from events WHERE id=:id
 ";
    $statement = $connect->prepare($query);
    $statement->execute(array(
        ':id' => $_POST['id']
    ));
}

?>

<?php

if (isset($_POST["id"]))

{

include ('conn.php');

$query = "

DELETE from events WHERE id=:id

$statement = $connect->prepare($query);

$statement->execute(array(

':id' => $_POST['id']

));

}

style.css

body {
	margin-top: 40px;
	text-align: center;
	font-size: 14px;
	font-family: "Helvetica Nueue", Arial, Verdana, sans-serif;
	background-color: #DDDDDD;
}
#wrap {
	width: 1100px;
	margin: 0 auto;
}
#external-events {
	float: left;
	width: 150px;
	padding: 0 10px;
	text-align: left;
}
#external-events h4 {
	font-size: 16px;
	margin-top: 0;
	padding-top: 1em;
}
.external-event {
	margin: 10px 0;
	padding: 2px 4px;
	background: #3366CC;
	color: #fff;
	font-size: .85em;
	cursor: pointer;
}
#external-events p {
	margin: 1.5em 0;
	font-size: 11px;
	color: #666;
}
#external-events p input {
	margin: 0;
	vertical-align: middle;
}
#event_calendar {
	margin: 0 auto;
	width: 900px;
	background-color: #FFFFFF;
	border-radius: 6px;
	box-shadow: 0 1px 2px #C3C3C3;
}
.fc-toolbar.fc-header-toolbar {
	padding: 10px;
}
.fc-button-group button {
	border-color: #5a45ff;
	color: #5a45ff;
	background: none;
	box-shadow: none;
	text-transform: capitalize;
}
.fc-day-grid-event .fc-content,
.fc-time-grid-event.fc-short .fc-content {
	white-space: nowrap;
	overflow: hidden;
	background: #5a45ff;
	color: #ffffff;
	padding: 4px;
}
.fc-toolbar .fc-state-active,
.fc-toolbar .ui-state-active {
	background: #5a45ff;
	color: #FFF;
}
.fc-today-button {
	background: #2a2a2f;
	color: #fff;
	opacity: 1;
	text-transform: capitalize;
}
.fc-basic-view .fc-week-number,
.fc-basic-view .fc-day-number {
	padding: 15px;
}
.fc-event,
.fc-event-dot {
	background-color: #5a45ff;
	border: none;
}

body {

margin-top: 40px;

text-align: center;

font-size: 14px;

font-family: "Helvetica Nueue", Arial, Verdana, sans-serif;

background-color: #DDDDDD;

}

#wrap {

width: 1100px;

margin: 0 auto;

}

#external-events {

float: left;

width: 150px;

padding: 0 10px;

text-align: left;

}

#external-events h4 {

font-size: 16px;

margin-top: 0;

padding-top: 1em;

}

.external-event {

margin: 10px 0;

padding: 2px 4px;

background: #3366CC;

color: #fff;

font-size: .85em;

cursor: pointer;

}

#external-events p {

margin: 1.5em 0;

font-size: 11px;

color: #666;

}

#external-events p input {

margin: 0;

vertical-align: middle;

}

#event_calendar {

margin: 0 auto;

width: 900px;

background-color: #FFFFFF;

border-radius: 6px;

box-shadow: 0 1px 2px #C3C3C3;

}

.fc-toolbar.fc-header-toolbar {

padding: 10px;

}

.fc-button-group button {

border-color: #5a45ff;

color: #5a45ff;

background: none;

box-shadow: none;

text-transform: capitalize;

}

.fc-day-grid-event .fc-content,

.fc-time-grid-event.fc-short .fc-content {

white-space: nowrap;

overflow: hidden;

background: #5a45ff;

color: #ffffff;

padding: 4px;

}

.fc-toolbar .fc-state-active,

.fc-toolbar .ui-state-active {

background: #5a45ff;

color: #FFF;

}

.fc-today-button {

background: #2a2a2f;

color: #fff;

opacity: 1;

text-transform: capitalize;

}

.fc-basic-view .fc-week-number,

.fc-basic-view .fc-day-number {

padding: 15px;

}

.fc-event,

.fc-event-dot {

background-color: #5a45ff;

border: none;

}

Preview & Download

Booking Calendar

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts. If you have any questions let me drop an email with the article name to the following email id: [email protected]

jQuery Event Booking Using FullCalendar With PHP

Share:

jQuery Event Booking Process

Database

conn.php

index.php

fetch.php

insert.php

update.php

delete.php

style.css

Preview & Download

Mraj

Don't miss on latest updates