Event CRUD in FullCalendar using PHP and jQuery Tutorial

chile666 · Thursday at 3:36 AM

In this tutorial, I will show how to Create CRUD Operation in FullCalendar with PHP and MySQL Database. here, you will learn to add, edit, view, and delete events on the calendar. The events will be stored in MySQL Database. This feature can be useful for your future PHP Projects such as Appointment Management Systems or Scheduling Systems.

We will create a simple PHP application with dummy MySQL data that stores the events/schedules. The main goal of the application is to have features or functionalities that adds, updates, view, and delete events in FullCalendar.

Getting Started

Download XAMPP as your local web server to run our PHP Script. After Installing the virtual server, open the XAMPP's Control Panel and start the Apache Server and MySQL.

Since, that events will be shown in a calendar view using the FullCalendar library/plugin, download the library's resources here.

Download Bootstrap v5 and jQuery for the interface design of the application that we'll be creating. After that move the library directory to the folder where you will store the source code on your end.

Creating The Database

Open a new tab in your browser and browse the XAMPP's PHPMyAdmin

. Next, create a new database naming dummy_db. Then, navigate the page into the SQL Tab/Page and paste SQL Script below to the provided text field. Lastly, click the Go Button to execute the script.

CREATE

TABLE

`schedule_

list`

(
`id`

int

(

30

)

NOT

NULL

PRIMARY KEY

AUTO_INCREMENT

,
`title`

text

NOT

NULL

,
`description`

text

NOT

NULL

,
`start_

datetime`

datetime

NOT

NULL

,
`end_

datetime`

datetime

DEFAULT

NULL
)

ENGINE

=

InnoDB

DEFAULT

CHARSET

=

utf8mb4;

Creating The Database Connection

Open a text editor such as sublime text, notepad++, or VSCode. Create a new PHP File naming db-connect.php. Then, Copy/Paste the code below. Make sure to configure the database credentials according to your setup.

<?php
$host

=

'localhost'

;
$username

=

'root'

;
$password

=

''

;
$dbname

=

'dummy_db'

;
$conn

=

new

mysqli(

$host

,

$username

,

$password

,

$dbname

)

;
if

(

!

$conn

)

{
die

(

"Cannot connect to the database."

.

$conn

->

error

)

;
}

Or, you can also import the SQL File I provided along with working source code file. The file is known as dummy_db.sql and located inside the db folder.

Creating The Interface

Next, we will be creating the interface of our page. The page contains the HTML elements and PHP script that shows the data and query data in the database. Copy/Paste the script below and save it as index.php.

<?php require_once(

'db-connect.php'

)

?>
<!DOCTYPE html>
<html

lang

=

"en"

>
<head

>
<meta

charset

=

"UTF-8"

>
<meta

http-equiv

=

"X-UA-Compatible"

content

=

"IE=edge"

>
<meta

name

=

"viewport"

content

=

"width=device-width, initial-scale=1.0"

>
<title

>

Scheduling</

title

>
<link

rel

=

"stylesheet"

href

=

"https://pro.fontawesome.com/releases/v5.10.0/css/all.css"

integrity=

"sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"

crossorigin=

"anonymous"

/

>
<link

rel

=

"stylesheet"

href

=

"./css/bootstrap.min.css"

>
<link

rel

=

"stylesheet"

href

=

"./fullcalendar/lib/main.min.css"

>
<script

src

=

"./js/jquery-3.6.0.min.js"

></

script

>
<script

src

=

"./js/bootstrap.min.js"

></

script

>
<script

src

=

"./fullcalendar/lib/main.min.js"

></

script

>
<style

>
:root {
--bs-success-rgb: 71, 222, 152 !important;
}
html,
body {
height: 100%;
width: 100%;
font-family: Apple Chancery, cursive;
}
.btn-info.text-light:hover,
.btn-info.text-light:focus {
background: #000;
}
table, tbody, td, tfoot, th, thead, tr {
border-color: #ededed !important;
border-style: solid;
border-width: 1px !important;
}
</

style

>
</

head

>
<body

class

=

"bg-light"

>
<nav class

=

"navbar navbar-expand-lg navbar-dark bg-dark bg-gradient"

id

=

"topNavBar"

>
<div

class

=

"container"

>
<a

class

=

"navbar-brand"

href

=

"https://sourcecodester.com"

>
Sourcecodester
</

a

>
<div

>
<b

class

=

"text-light"

>

Sample Scheduling</

b

>
</

div

>
</

div

>
</

nav>
<div

class

=

"container py-5"

id

=

"page-container"

>
<div

class

=

"row"

>
<div

class

=

"col-md-9"

>
<div

id

=

"calendar"

></

div

>
</

div

>
<div

class

=

"col-md-3"

>
<div

class

=

"cardt rounded-0 shadow"

>
<div

class

=

"card-header bg-gradient bg-primary text-light"

>
<h5

class

=

"card-title"

>

Schedule Form</

h5

>
</

div

>
<div

class

=

"card-body"

>
<div

class

=

"container-fluid"

>
<form

action

=

"save_schedule.php"

method

=

"post"

id

=

"schedule-form"

>
<input

type

=

"hidden"

name

=

"id"

value

=

""

>
<div

class

=

"form-group mb-2"

>
<label

for

=

"title"

class

=

"control-label"

>

Title</

label

>
<input

type

=

"text"

class

=

"form-control form-control-sm rounded-0"

name

=

"title"

id

=

"title"

required>
</

div

>
<div

class

=

"form-group mb-2"

>
<label

for

=

"description"

class

=

"control-label"

>

Description</

label

>
<textarea

rows

=

"3"

class

=

"form-control form-control-sm rounded-0"

name

=

"description"

id

=

"description"

required></

textarea

>
</

div

>
<div

class

=

"form-group mb-2"

>
<label

for

=

"start_datetime"

class

=

"control-label"

>

Start</

label

>
<input

type

=

"datetime-local"

class

=

"form-control form-control-sm rounded-0"

name

=

"start_datetime"

id

=

"start_datetime"

required>
</

div

>
<div

class

=

"form-group mb-2"

>
<label

for

=

"end_datetime"

class

=

"control-label"

>

End</

label

>
<input

type

=

"datetime-local"

class

=

"form-control form-control-sm rounded-0"

name

=

"end_datetime"

id

=

"end_datetime"

required>
</

div

>
</

form

>
</

div

>
</

div

>
<div

class

=

"card-footer"

>
<div

class

=

"text-center"

>
<button

class

=

"btn btn-primary btn-sm rounded-0"

type

=

"submit"

form=

"schedule-form"

><i

class

=

"fa fa-save"

></

i

>

Save</

button

>
<button

class

=

"btn btn-default border btn-sm rounded-0"

type

=

"reset"

form=

"schedule-form"

><i

class

=

"fa fa-reset"

></

i

>

Cancel</

button

>
</

div

>
</

div

>
</

div

>
</

div

>
</

div

>
</

div

>
<div

class

=

"modal fade"

tabindex

=

"-1"

data-bs-backdrop=

"static"

id

=

"event-details-modal"

>
<div

class

=

"modal-dialog modal-dialog-centered"

>
<div

class

=

"modal-content rounded-0"

>
<div

class

=

"modal-header rounded-0"

>
<h5

class

=

"modal-title"

>

Schedule Details</

h5

>
<button

type

=

"button"

class

=

"btn-close"

data-bs-dismiss=

"modal"

aria-label

=

"Close"

></

button

>
</

div

>
<div

class

=

"modal-body rounded-0"

>
<div

class

=

"container-fluid"

>
<dl

>
<dt

class

=

"text-muted"

>

Title</

dt

>
<dd

id

=

"title"

class

=

"fw-bold fs-4"

></

dd

>
<dt

class

=

"text-muted"

>

Description</

dt

>
<dd

id

=

"description"

class

=

""

></

dd

>
<dt

class

=

"text-muted"

>

Start</

dt

>
<dd

id

=

"start"

class

=

""

></

dd

>
<dt

class

=

"text-muted"

>

End</

dt

>
<dd

id

=

"end"

class

=

""

></

dd

>
</

dl

>
</

div

>
</

div

>
<div

class

=

"modal-footer rounded-0"

>
<div

class

=

"text-end"

>
<button

type

=

"button"

class

=

"btn btn-primary btn-sm rounded-0"

id

=

"edit"

data-id

=

""

>

Edit</

button

>
<button

type

=

"button"

class

=

"btn btn-danger btn-sm rounded-0"

id

=

"delete"

data-id

=

""

>

Delete</

button

>
<button

type

=

"button"

class

=

"btn btn-secondary btn-sm rounded-0"

data-bs-dismiss=

"modal"

>

Close</

button

>
</

div

>
</

div

>
</

div

>
</

div

>
</

div

>
<?php
$schedules =

$conn->

query("SELECT * FROM `schedule_list`");
$sched_res = [];
foreach($schedules->fetch_all(MYSQLI_ASSOC) as $row){
$row['sdate'] = date("F d, Y h:i A",strtotime($row['start_datetime']));
$row['edate'] = date("F d, Y h:i A",strtotime($row['end_datetime']));
$sched_res[$row['id']] = $row;
}
?>
<?php
if(

isset(

$conn)

)

$conn->

close();
?>
</

body

>
<script

>
var scheds = $.parseJSON('<?=

json_encode(

$sched_res)

?>

')
</

script

>
<script

src

=

"./js/script.js"

></

script

>
</

html

>

Creating The PHP Queries

Next, we will be creating the PHP queries. The codes below is the scripts that inserts, updates, and delete event data in our database. Save the files according to the filename

above each scripts.

save_schedule.php
This scripts contains the insert and update query scripts.

<?php
require_once

(

'db-connect.php'

)

;
if

(

$_SERVER

[

'REQUEST_METHOD'

]

!=

'POST'

)

{
echo

"<script> alert('Error: No data to save.'); location.replace('./') </script>"

;
$conn

->

close

(

)

;
exit

;
}
extract

(

$_POST

)

;
$allday

=

isset

(

$allday

)

;
if

(

empty

(

$id

)

)

{
$sql

=

"INSERT INTO `schedule_list` (`title`,`description`,`start_datetime`,`end_datetime`) VALUES ('$title

','$description

','$start_datetime

','$end_datetime

')"

;
}

else

{
$sql

=

"UPDATE `schedule_list` set `title` = '{$title}

', `description` = '{$description}

', `start_datetime` = '{$start_datetime}

', `end_datetime` = '{$end_datetime}

' where `id` = '{$id}

'"

;
}
$save

=

$conn

->

query

(

$sql

)

;
if

(

$save

)

{
echo

"<script> alert('Schedule Successfully Saved.'); location.replace('./') </script>"

;
}

else

{
echo

"<pre>"

;
echo

"An Error occurred.<br>"

;
echo

"Error: "

.

$conn

->

error

.

"<br>"

;
echo

"SQL: "

.

$sql

.

"<br>"

;
echo

"</pre>"

;
}
$conn

->

close

(

)

;
?>

delete_schedule.php
This scripts contains the delete query scripts.

<?php
require_once

(

'db-connect.php'

)

;
if

(

!

isset

(

$_GET

[

'id'

]

)

)

{
echo

"<script> alert('Undefined Schedule ID.'); location.replace('./') </script>"

;
$conn

->

close

(

)

;
exit

;
}
$delete

=

$conn

->

query

(

"DELETE FROM `schedule_list` where id = '{$_GET['id']}

'"

)

;
if

(

$delete

)

{
echo

"<script> alert('Event has deleted successfully.'); location.replace('./') </script>"

;
}

else

{
echo

"<pre>"

;
echo

"An Error occured.<br>"

;
echo

"Error: "

.

$conn

->

error

.

"<br>"

;
echo

"SQL: "

.

$sql

.

"<br>"

;
echo

"</pre>"

;
}
$conn

->

close

(

)

;
?>

Creating The Main Function

Lastly, the script below is a javascript codes that initialize the calendar, render the events in the calendar, and some other functionalities. Save this file as script.js.

var

calendar;
var

Calendar =

FullCalendar.Calendar

;
var

events =

[

]

;
$(

function

(

)

{
if

(

!!

scheds)

{
Object

.keys

(

scheds)

.map

(

k =>

{
var

row =

scheds[

k]
events.push

(

{

id:

row.id

,

title:

row.title

,

start:

row.start_datetime

,

end:

row.end_datetime

}

)

;
}

)
}
var

date =

new

Date

(

)
var

d =

date.getDate

(

)

,
m =

date.getMonth

(

)

,
y =

date.getFullYear

(

)
calendar =

new

Calendar(

document.getElementById

(

'calendar'

)

,

{
headerToolbar:

{
left:

'prev,next today'

,
right:

'dayGridMonth,dayGridWeek,list'

,
center:

'title'

,
}

,
selectable:

true

,
themeSystem:

'bootstrap'

,
//Random default events
events:

events,
eventClick:

function

(

info)

{
var

_details =

$(

'#event-details-modal'

)
var

id =

info.event

.id
if

(

!!

scheds[

id]

)

{
_details.find

(

'#title'

)

.text

(

scheds[

id]

.title

)
_details.find

(

'#description'

)

.text

(

scheds[

id]

.description

)
_details.find

(

'#start'

)

.text

(

scheds[

id]

.sdate

)
_details.find

(

'#end'

)

.text

(

scheds[

id]

.edate

)
_details.find

(

'#edit,#delete'

)

.attr

(

'data-id'

,

id)
_details.modal

(

'show'

)
}

else

{
alert(

"Event is undefined"

)

;
}
}

,
eventDidMount:

function

(

info)

{
// Do Something after events mounted
}

,
editable:

true
}

)

;
calendar.render

(

)

;
// Form reset listener
$(

'#schedule-form'

)

.on

(

'reset'

,

function

(

)

{
$(

this

)

.find

(

'input:hidden'

)

.val

(

''

)
$(

this

)

.find

(

'input:visible'

)

.first

(

)

.focus

(

)
}

)
// Edit Button
$(

'#edit'

)

.click

(

function

(

)

{
var

id =

$(

this

)

.attr

(

'data-id'

)
if

(

!!

scheds[

id]

)

{
var

_form =

$(

'#schedule-form'

)
console.log

(

String

(

scheds[

id]

.start_datetime

)

,

String

(

scheds[

id]

.start_datetime

)

.replace

(

" "

,

"\\

t"

)

)
_form.find

(

'[name="id"]'

)

.val

(

id)
_form.find

(

'[name="title"]'

)

.val

(

scheds[

id]

.title

)
_form.find

(

'[name="description"]'

)

.val

(

scheds[

id]

.description

)
_form.find

(

'[name="start_datetime"]'

)

.val

(

String

(

scheds[

id]

.start_datetime

)

.replace

(

" "

,

"T"

)

)
_form.find

(

'[name="end_datetime"]'

)

.val

(

String

(

scheds[

id]

.end_datetime

)

.replace

(

" "

,

"T"

)

)
$(

'#event-details-modal'

)

.modal

(

'hide'

)
_form.find

(

'[name="title"]'

)

.focus

(

)
}

else

{
alert(

"Event is undefined"

)

;
}
}

)
// Delete Button / Deleting an Event
$(

'#delete'

)

.click

(

function

(

)

{
var

id =

$(

this

)

.attr

(

'data-id'

)
if

(

!!

scheds[

id]

)

{
var

_conf =

confirm(

"Are you sure to delete this scheduled event?"

)

;
if

(

_conf ===

true

)

{
location.href

=

"./delete_schedule.php?id="

+

id;
}
}

else

{
alert(

"Event is undefined"

)

;
}
}

)
}

)

DEMO VIDEO

That's it! You can now test the application in your browser and see if we have met our goal on this tutorial. If ever you have encountered any errors, please review your source code by differentiating it from the source code I provided above. You can also test the working source code I created for this tutorial. You can download the source code zip file below this article.

That is the end of this tutorial. I hope you'll find this Tutorial useful for your current and future PHP projects.

Happy Coding :)

Download

You must upgrade your account or reply in the thread to view the hidden content.

Event CRUD in FullCalendar using PHP and jQuery Tutorial

More options

chile666

452,496

334,779

334,787