Event CRUD in FullCalendar using PHP and jQuery Tutorial

Submitted by oretnom23 on Thursday, January 6, 2022 - 15:33.

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>
    <!-- Event Details Modal -->
    < 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>
    <!-- Event Details Modal -->
 
<?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 :)

Comments

Bug when changing event date via drag and drop

Thanks for this tutorial! I found this bug: dragging and dropping an event works in the UI, but start and end date aren't updated in database. Could you please fix this?

Thanks for this tutorial!…

Thanks for this tutorial! Can we get this example with MVC

you got it?

Add new comment
22060 views

you got it?

you got it?

event crud Calendar

cl

Submit now...

Event CRUD in FullCalendar using PHP and jQuery Tutorial

Getting Started

Creating The Database

Creating The Database Connection

Creating The Interface

Creating The PHP Queries

Creating The Main Function

DEMO VIDEO

Happy Coding :)

Tags

Comments

Bug when changing event date via drag and drop

Thanks for this tutorial!…

MVC

merci pour le tuto

DOT color

how can i change the event color?

Appreciated

FullCallendar

efefef

event crud Calendar

Add new comment

Share Source Code or Tutorial

Popular Source Code

Book navigation

Recent content