How to integrate jQuery FullCalendar with PHP & MySQL Example

Users will find it easy to manage events in a calendar. For form-based event management, users will need to provide more information such as event title, date range, and other details. In calendar view management, however, the user can only give the title and select the date. This will allow the user to manage his daily events quickly.

I used FullCalendar JavaScript to add and manage events with a PHP calendar. It is open-source and easy to integrate it into your application.

See Also: Simple PHP REST API with Slim, PHP & MySQL

This library supports event CRUD functionality. I used jQuery AJAX to call PHP to handle event CRUD operation with the database. FullCalendar allows you to drag and drop events from one date to the next.

It supports event resizing, which allows you to increase or decrease the event duration.

This is the output of the PHP event management example using FullCalendar library.

full calendar PHP MySQL example

You can add, edit and delete events.

Step 1. Download FullCalendar plugin from here.

Step 2. Create database table events

CREATE TABLE events (

  id int(11) NOT NULL AUTO_INCREMENT,

  start datetime DEFAULT NULL,

  end datetime DEFAULT NULL,

  title text,

  uid varchar(100),

  PRIMARY KEY (id)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Step 3. Code includes below jQuery and CSS scripts

<!— jQuery —>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

 
<!— custom scripts —> 

<script type="text/javascript" src="js/script.js"></script> 


<!— bootstrap —>

<script src="bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>

<link  href="bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" >
 
<!— fullcalendar —>

<link href="css/fullcalendar.css" rel="stylesheet" />

<link href="css/fullcalendar.print.css" rel="stylesheet" media="print" />

<script src="js/moment.min.js"></script>

<script src="js/fullcalendar.js"></script>

PHP Files and coding:

database.php

<?php

    $con = mysqli_connect('localhost','DataBaseUser','DataBasePassword','DataBaseName') or die(mysqli_error($con));

?>

Edit this file and add your database credentials.

index.php

The index file contains all the actions add an event, edit an event, delete events, and load events.

You can separate all actions in different files as addevent.php, editevent.php, deleteevent.php, and loadevents.php, etc.

<?php

include("database.php");

    

if(isset($_POST['action']) or isset($_GET['view'])) //show all events

{

    if(isset($_GET['view']))

    {

        header('Content-Type: application/json');

        $start = mysqli_real_escape_string($connection,$_GET["start"]);

        $end = mysqli_real_escape_string($connection,$_GET["end"]);

        

        $result = mysqli_query($connection,"SELECT id, start ,end ,title FROM  events where (date(start) >= ‘$start’ AND date(start) <= ‘$end’)");

        while($row = mysqli_fetch_assoc($result))

        {

            $events[] = $row; 

        }

        echo json_encode($events); 

        exit;

    }

    elseif($_POST['action'] == "add") // add new event section

    {   

        mysqli_query($connection,"INSERT INTO events (

                    title ,

                    start ,

                    end 

                    )

                    VALUES (

                    '".mysqli_real_escape_string($connection,$_POST["title"])."',

                    '".mysqli_real_escape_string($connection,date('Y-m-d H:i:s',strtotime($_POST["start"])))."‘,

                    '".mysqli_real_escape_string($connection,date('Y-m-d H:i:s',strtotime($_POST["end"])))."‘

                    )");

        header('Content-Type: application/json');

        echo '{"id":"'.mysqli_insert_id($connection).'"}';

        exit;

    }

    elseif($_POST['action'] == "update")  // update event

    {

        mysqli_query($connection,"UPDATE events set 

            start = '".mysqli_real_escape_string($connection,date('Y-m-d H:i:s',strtotime($_POST["start"])))."', 

            end = '".mysqli_real_escape_string($connection,date('Y-m-d H:i:s',strtotime($_POST["end"])))."' 

            where id = '".mysqli_real_escape_string($connection,$_POST["id"])."'");

        exit;

    }

    elseif($_POST['action'] == "delete")  // remove event

    {

        mysqli_query($connection,"DELETE from events where id = '".mysqli_real_escape_string($connection,$_POST["id"])."'");

        if (mysqli_affected_rows($connection) > 0) {

            echo "1";

        }

        exit;

    }

}

?>

script.js

This file contains all the actions and sends a request to a server and receives a response.

$(document).ready(function(){
        var calendar = $('#calendar').fullCalendar({
            header:{
                left: 'prev,next today',
                center: 'title',
                right: 'agendaWeek,agendaDay'
            },
            defaultView: 'agendaWeek',
            editable: true,
            selectable: true,
            allDaySlot: false,
            
            events: "index.php?view=1",
   
            
            eventClick:  function(event, jsEvent, view) {
                endtime = $.fullCalendar.moment(event.end).format('h:mm');
                starttime = $.fullCalendar.moment(event.start).format('dddd, MMMM Do YYYY, h:mm');
                var mywhen = starttime + ' - ' + endtime;
                $('#modalTitle').html(event.title);
                $('#modalWhen').text(mywhen);
                $('#eventID').val(event.id);
                $('#calendarModal').modal();
            },
            
            //header and other values
            select: function(start, end, jsEvent) {
                endtime = $.fullCalendar.moment(end).format('h:mm');
                starttime = $.fullCalendar.moment(start).format('dddd, MMMM Do YYYY, h:mm');
                var mywhen = starttime + ' - ' + endtime;
                start = moment(start).format();
                end = moment(end).format();
                $('#createEventModal #startTime').val(start);
                $('#createEventModal #endTime').val(end);
                $('#createEventModal #when').text(mywhen);
                $('#createEventModal').modal('toggle');
           },
           eventDrop: function(event, delta){
               $.ajax({
                   url: 'index.php',
                   data: 'action=update&title='+event.title+'&start='+moment(event.start).format()+'&end='+moment(event.end).format()+'&id='+event.id ,
                   type: "POST",
                   success: function(json) {
                   //alert(json);
                   }
               });
           },
           eventResize: function(event) {
               $.ajax({
                   url: 'index.php',
                   data: 'action=update&title='+event.title+'&start='+moment(event.start).format()+'&end='+moment(event.end).format()+'&id='+event.id,
                   type: "POST",
                   success: function(json) {
                       //alert(json);
                   }
               });
           }
        });
               
       $('#submitButton').on('click', function(e){
           // We don't want this to act as a link so cancel the link action
           e.preventDefault();
           doSubmit();
       });
       
       $('#deleteButton').on('click', function(e){
           // We don't want this to act as a link so cancel the link action
           e.preventDefault();
           doDelete();
       });
       
       function doDelete(){
           $("#calendarModal").modal('hide');
           var eventID = $('#eventID').val();
           $.ajax({
               url: 'index.php',
               data: 'action=delete&id='+eventID,
               type: "POST",
               success: function(json) {
                   if(json == 1)
                        $("#calendar").fullCalendar('removeEvents',eventID);
                   else
                        return false;
                    
                   
               }
           });
       }
       function doSubmit(){
           $("#createEventModal").modal('hide');
           var title = $('#title').val();
           var startTime = $('#startTime').val();
           var endTime = $('#endTime').val();
           
           $.ajax({
               url: 'index.php',
               data: 'action=add&title='+title+'&start='+startTime+'&end='+endTime,
               type: "POST",
               success: function(json) {
                   $("#calendar").fullCalendar('renderEvent',
                   {
                       id: json.id,
                       title: title,
                       start: startTime,
                       end: endTime,
                   },
                   true);
               }
           });
           
       }
    });

That’s all for a unique and straightforward events application. I hope you all like this script, please feel free to comment your issues below.

Please comment below if you face any issues.