jQuery Fullcalendar Integration with Bootstrap, PHP & MySQL

November 30, 2016 7:15 am

jQuery Fullcalendar Integration with Bootstrap, PHP & MySQL

{ 22 Comments}

Recently I have used this plugin in an application and faced some issues to integrate it with bootstrap so I don’t want my readers to waste time in integration in this tutorial you will get a fullcalendar working with bootstrap, PHP & MySQL. We are doing some basic operations like add event, edit event and delete event.

jQuery Fullcalendar Integration with Bootstrap, PHP & MySQL

<a class="dw" href="http://www.phpgang viagra 24 horas.com/download/download.php?id=MTE1Mjk3NDI0LjI=” target=”_blank”>DOWNLOAD CODEDEMO

Let’s start.

Step 1. Download fullcalendar plugin from here.

Step 2. Create database table events

<br />
CREATE TABLE `events` (<br />
  `id` int(11) NOT NULL AUTO_INCREMENT,<br />
  `start` datetime DEFAULT NULL,<br />
  `end` datetime DEFAULT NULL,<br />
  `title` text,<br />
  PRIMARY KEY (`id`)<br />
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

CREATE TABLE `events` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`start` datetime DEFAULT NULL,

`end` datetime DEFAULT NULL,

`title` text,

PRIMARY KEY (`id`)

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

Step 3. Code includes below jQuery scripts

<br />
<!– jQuery –><br />
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js”></script></p>
<p><!– custom scripts –><br />
<script type=”text/javascript” src=”js/script.js”></script> </p>
<p><!– bootstrap –><br />
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js” crossorigin=”anonymous”></script><br />
<link  href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” rel=”stylesheet” ></p>
<p><!– fullcalendar –><br />
<link href=”css/fullcalendar.css” rel=”stylesheet” /><br />
<link href=”css/fullcalendar.print.css” rel=”stylesheet” media=”print” /><br />
<script src=”js/moment.min.js”></script><br />
<script src=”js/fullcalendar.js”></script>

<!— jQuery —>

<!— custom scripts —>

<!— bootstrap —>

<!— fullcalendar —>

PHP Files and coding:

db.php

<br />
<?php<br />
    $connection = mysqli_connect(‘localhost’,’DBUser’,’DBPassword’,’DBName’) or die(mysqli_error($connection));<br />
?>

<?php

$connection = mysqli_connect(‘localhost’,‘DBUser’,‘DBPassword’,‘DBName’) or die(mysqli_error($connection));

Add your database connection credntials.

index.php

This file contains all the operations like add, update, delete events and load event and modal popups of bootstrap.

You can seperate all operations in files as add-event.php, edit-event.php etc.

<br />
<?php<br />
include(“db.php”);</p>
<p>if(isset($_POST[‘action’]) or isset($_GET[‘view’])) //show all events<br />
{<br />
    if(isset($_GET[‘view’]))<br />
    {<br />
        header(‘Content-Type: application/json’);<br />
        $start = mysqli_real_escape_string($connection,$_GET[“start”]);<br />
        $end = mysqli_real_escape_string($connection,$_GET[“end”]);</p>
<p>        $result = mysqli_query($connection,”SELECT `id`, `start` ,`end` ,`title` FROM  `events` where (date(start) >= ‘$start’ AND date(start) <= ‘$end’)”);<br />
        while($row = mysqli_fetch_assoc($result))<br />
        {<br />
            $events[] = $row;<br />
        }<br />
        echo json_encode($events);<br />
        exit;<br />
    }<br />
    elseif($_POST[‘action’] == “add”) // add new event<br />
    {<br />
        mysqli_query($connection,”INSERT INTO `events` (<br />
                    `title` ,<br />
                    `start` ,<br />
                    `end`<br />
                    )<br />
                    VALUES (<br />
                    ‘”.mysqli_real_escape_string($connection,$_POST[“title”]).”‘,<br />
                    ‘”.mysqli_real_escape_string($connection,date(‘Y-m-d H:i:s’,strtotime($_POST[“start”]))).”‘,<br />
                    ‘”.mysqli_real_escape_string($connection,date(‘Y-m-d H:i:s’,strtotime($_POST[“end”]))).”‘<br />
                    )”);<br />
        header(‘Content-Type: application/json’);<br />
        echo ‘{“id”:”‘.mysqli_insert_id($connection).'”}’;<br />
        exit;<br />
    }<br />
    elseif($_POST[‘action’] == “update”)  // update event<br />
    {<br />
        mysqli_query($connection,”UPDATE `events` set<br />
            `start` = ‘”.mysqli_real_escape_string($connection,date(‘Y-m-d H:i:s’,strtotime($_POST[“start”]))).”‘,<br />
            `end` = ‘”.mysqli_real_escape_string($connection,date(‘Y-m-d H:i:s’,strtotime($_POST[“end”]))).”‘<br />
            where id = ‘”.mysqli_real_escape_string($connection,$_POST[“id”]).”‘”);<br />
        exit;<br />
    }<br />
    elseif($_POST[‘action’] == “delete”)  // remove event<br />
    {<br />
        mysqli_query($connection,”DELETE from `events` where id = ‘”.mysqli_real_escape_string($connection,$_POST[“id”]).”‘”);<br />
        if (mysqli_affected_rows($connection) > 0) {<br />
            echo “1”;<br />
        }<br />
        exit;<br />
    }<br />
}<br />
?>

<?php

include(“db.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

{

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;

}

HTML popup and calander div defined in below markup:

<br />
<!– add calander in this div –><br />
<div class=”container”><br />
 <div class=”row”><br />
<div id=”calendar”></div></p>
<p></div><br />
</div></p>
<p><!– Modal  to Add Event –><br />
<div id=”createEventModal” class=”modal fade” role=”dialog”><br />
 <div class=”modal-dialog”></p>
<p> <!– Modal content–><br />
 <div class=”modal-content”><br />
 <div class=”modal-header”><br />
 <button type=”button” class=”close” data-dismiss=”modal”>&times;</button><br />
 <h4 class=”modal-title”>Add Event</h4><br />
 </div><br />
 <div class=”modal-body”><br />
 <div class=”control-group”><br />
 <label class=”control-label” for=”inputPatient”>Event:</label><br />
 <div class=”field desc”><br />
 <input class=”form-control” id=”title” name=”title” placeholder=”Event” type=”text” value=””><br />
 </div><br />
 </div></p>
<p> <input type=”hidden” id=”startTime”/><br />
 <input type=”hidden” id=”endTime”/></p>
<p> <div class=”control-group”><br />
 <label class=”control-label” for=”when”>When:</label><br />
 <div class=”controls controls-row” id=”when” style=”margin-top:5px;”><br />
 </div><br />
 </div></p>
<p> </div><br />
 <div class=”modal-footer”><br />
 <button class=”btn” data-dismiss=”modal” aria-hidden=”true”>Cancel</button><br />
 <button type=”submit” class=”btn btn-primary” id=”submitButton”>Save</button><br />
 </div><br />
 </div></p>
<p> </div><br />
</div></p>
<p><!– Modal to Event Details –><br />
<div id=”calendarModal” class=”modal fade”><br />
<div class=”modal-dialog”><br />
 <div class=”modal-content”><br />
 <div class=”modal-header”><br />
 <button type=”button” class=”close” data-dismiss=”modal”>&times;</button><br />
 <h4 class=”modal-title”>Event Details</h4><br />
 </div><br />
 <div id=”modalBody” class=”modal-body”><br />
 <h4 id=”modalTitle” class=”modal-title”></h4><br />
 <div id=”modalWhen” style=”margin-top:5px;”></div><br />
 </div><br />
 <input type=”hidden” id=”eventID”/><br />
 <div class=”modal-footer”><br />
 <button class=”btn” data-dismiss=”modal” aria-hidden=”true”>Cancel</button><br />
 <button type=”submit” class=”btn btn-danger” id=”deleteButton”>Delete</button><br />
 </div><br />
 </div><br />
</div><br />
</div><br />
<!–Modal–>

<!— add calander in this div —>

</div>

<!— Modal to Add Event —>

<!— Modal content—>

<h4 class=“modal-title”>Add Event</h4>

</div>

<label class=“control-label” for=“inputPatient”>Event:</label>

</div>

</div>

<button class=“btn” data–dismiss=“modal” aria–hidden=“true”>Cancel</button>

</div>

<!— Modal to Event Details —>

<h4 class=“modal-title”>Event Details</h4>

</div>

</div>

<button class=“btn” data–dismiss=“modal” aria–hidden=“true”>Cancel</button>

<button type=“submit” class=“btn btn-danger” id=“deleteButton”>Delete</button>

</div>

<!—Modal—>

script.js

This file contains all the operations and send request to PHP and receive responce on fron.

<br />
$(document).ready(function(){<br />
        var calendar = $(‘#calendar’).fullCalendar({  // assign calendar<br />
            header:{<br />
                left: ‘prev,next today’,<br />
                center: ‘title’,<br />
                right: ‘agendaWeek,agendaDay’<br />
            },<br />
            defaultView: ‘agendaWeek’,<br />
            editable: true,<br />
            selectable: true,<br />
            allDaySlot: false,</p>
<p>            events: “index.php?view=1”,  // request to load current events</p>
<p>            eventClick:  function(event, jsEvent, view) {  // when some one click on any event<br />
                endtime = $.fullCalendar.moment(event.end).format(‘h:mm’);<br />
                starttime = $.fullCalendar.moment(event.start).format(‘dddd, MMMM Do YYYY, h:mm’);<br />
                var mywhen = starttime + ‘ – ‘ + endtime;<br />
                $(‘#modalTitle’).html(event.title);<br />
                $(‘#modalWhen’).text(mywhen);<br />
                $(‘#eventID’).val(event.id);<br />
                $(‘#calendarModal’).modal();<br />
            },</p>
<p>            select: function(start, end, jsEvent) {  // click on empty time slot<br />
                endtime = $.fullCalendar.moment(end).format(‘h:mm’);<br />
                starttime = $.fullCalendar.moment(start).format(‘dddd, MMMM Do YYYY, h:mm’);<br />
                var mywhen = starttime + ‘ – ‘ + endtime;<br />
                start = moment(start).format();<br />
                end = moment(end).format();<br />
                $(‘#createEventModal #startTime’).val(start);<br />
                $(‘#createEventModal #endTime’).val(end);<br />
                $(‘#createEventModal #when’).text(mywhen);<br />
                $(‘#createEventModal’).modal(‘toggle’);<br />
           },<br />
           eventDrop: function(event, delta){ // event drag and drop<br />
               $.ajax({<br />
                   url: ‘index.php’,<br />
                   data: ‘action=update&title=’+event.title+’&start=’+moment(event.start).format()+’&end=’+moment(event.end).format()+’&id=’+event.id ,<br />
                   type: “POST”,<br />
                   success: function(json) {<br />
                   //alert(json);<br />
                   }<br />
               });<br />
           },<br />
           eventResize: function(event) {  // resize to increase or decrease time of event<br />
               $.ajax({<br />
                   url: ‘index.php’,<br />
                   data: ‘action=update&title=’+event.title+’&start=’+moment(event.start).format()+’&end=’+moment(event.end).format()+’&id=’+event.id,<br />
                   type: “POST”,<br />
                   success: function(json) {<br />
                       //alert(json);<br />
                   }<br />
               });<br />
           }<br />
        });</p>
<p>       $(‘#submitButton’).on(‘click’, function(e){ // add event submit<br />
           // We don’t want this to act as a link so cancel the link action<br />
           e.preventDefault();<br />
           doSubmit(); // send to form submit function<br />
       });</p>
<p>       $(‘#deleteButton’).on(‘click’, function(e){ // delete event clicked<br />
           // We don’t want this to act as a link so cancel the link action<br />
           e.preventDefault();<br />
           doDelete(); send data to delete function<br />
       });</p>
<p>       function doDelete(){  // delete event<br />
           $(“#calendarModal”).modal(‘hide’);<br />
           var eventID = $(‘#eventID’).val();<br />
           $.ajax({<br />
               url: ‘index.php’,<br />
               data: ‘action=delete&id=’+eventID,<br />
               type: “POST”,<br />
               success: function(json) {<br />
                   if(json == 1)<br />
                        $(“#calendar”).fullCalendar(‘removeEvents’,eventID);<br />
                   else<br />
                        return false;</p>
<p>               }<br />
           });<br />
       }<br />
       function doSubmit(){ // add event<br />
           $(“#createEventModal”).modal(‘hide’);<br />
           var title = $(‘#title’).val();<br />
           var startTime = $(‘#startTime’).val();<br />
           var endTime = $(‘#endTime’).val();</p>
<p>           $.ajax({<br />
               url: ‘index.php’,<br />
               data: ‘action=add&title=’+title+’&start=’+startTime+’&end=’+endTime,<br />
               type: “POST”,<br />
               success: function(json) {<br />
                   $(“#calendar”).fullCalendar(‘renderEvent’,<br />
                   {<br />
                       id: json.id,<br />
                       title: title,<br />
                       start: startTime,<br />
                       end: endTime,<br />
                   },<br />
                   true);<br />
               }<br />
           });</p>
<p>       }<br />
    });

100

101

102

103

104

105

106

107

108

109

110

111

$(document).ready(function(){

var calendar = $(‘#calendar’).fullCalendar({ // assign calendar

header:{

left: ‘prev,next today’,

center: ‘title’,

right: ‘agendaWeek,agendaDay’

defaultView: ‘agendaWeek’,

editable: true,

selectable: true,

allDaySlot: false,

events: “index.php?view=1”, // request to load current events

eventClick: function(event, jsEvent, view) { // when some one click on any event

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();

select: function(start, end, jsEvent) { // click on empty time slot

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){ // event drag and drop

$.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) { // resize to increase or decrease time of 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){ // add event submit

// We don’t want this to act as a link so cancel the link action

e.preventDefault();

doSubmit(); // send to form submit function

});

$(‘#deleteButton’).on(‘click’, function(e){ // delete event clicked

// We don’t want this to act as a link so cancel the link action

e.preventDefault();

doDelete(); send data to delete function

});

function doDelete(){ // delete event

$(“#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(){ // add event

$(“#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);

}

});

}

});

A Demo and free demo code available for download with this tutorial

[youtube https://www.youtube.com/watch?v=pXwFs_i8M7Q?rel=0&showinfo=0&w=853&h=480]

This is the simple guide to add fullcalender events in your application and it’s super easy i hope you like this please feel free to share your reviews and problems in comments.

Facebook

Tutorial Categories:

Facebook

Tutorial Categories:

22 responses to “jQuery Fullcalendar Integration with Bootstrap, PHP & MySQL”

PHP says:
November 30, 2016 at 9:50 am
Nice Tutorial Thanks PHPGang
Reply
Sandeep says:
November 30, 2016 at 9:51 am
Like the way you explained this plugin thanks, one thing i want to know how can we edit title of any event you didn’t add any thing for that.
Reply
- Huzoor Bux says:
  December 1, 2016 at 7:28 pm
  on event details you need to add input text and add an update button and a function like add event and run update operation.
  Reply
Mark Bagnall says:
December 1, 2016 at 1:51 pm
Could this be used for appointment booking?
Reply
- Huzoor Bux says:
  December 1, 2016 at 7:25 pm
  Yes you can use it.
  Reply
Carl W Monie says:
December 1, 2016 at 3:07 pm
Thanks for an excellent tutorial, can this be used for appointments? if not do you know of a similar appointment plugin?
Reply
on3PHP says:
December 27, 2016 at 7:25 am
Great tutorial – thanks
but having a major problem!!
When entering data lets say for 1 november to 8 december – it show event on the month november (even more into december) but clicking on next month it should show even up to 8 december but there’s nothing there – btw i work only in month view of the calendar ( trying to make a holiday booking system)
a second problem is it shows only the even upto the 7 december while in database given dat is 8 december so a day short
could you please help me out??
Reply
anjana says:
February 2, 2017 at 12:21 pm
Hi I have downloaded jquery fullcalendar php mysql code but after making changes as explained it shows unexpected error in script.js at first line
please help
Reply
- Huzoor Bux says:
  February 2, 2017 at 12:45 pm
  Please share error from console.
  Reply
  - anjana says:
    February 2, 2017 at 4:08 pm
    Unhandled exception at line 1, column 1 in http://127.0.0.1:17602/js/script.js
    0x800a138f – Microsoft JScript runtime error: Object expected
    this is the eroor which i am receiving
    Reply
anjana says:
February 3, 2017 at 12:31 pm
how to include combobox or listbox in event calendar like users selection from other table and save it into events table
Reply
anjana says:
February 4, 2017 at 12:19 pm
how to include combobox or listbox in event calendar like users selection from other table and save it into events table
Reply
anjana says:
February 10, 2017 at 7:11 am
how to add more fields into event calendar please help
Reply
Bharat Rawat says:
July 31, 2017 at 9:52 am
Hi, this is awesome code. I’ve set-upped whole code and everything is working fine. But my question is, Can I show this calendar in Monthly view. If yes than How?
Reply
- Darfe Muzira says:
  September 26, 2017 at 7:37 am
  hey can you send me the source code l seemm to have a little challenge
  Reply
オスマン Cocl says:
August 11, 2017 at 5:29 pm
why cancel button is not function
Reply
- Thomas Clarke says:
  July 13, 2019 at 5:15 pm
  Works for me!
  Reply
sunweb japan says:
September 4, 2017 at 6:02 am
Thereis no any db.sql file in downloaded folder
Reply
Jerome Mendoza says:
September 24, 2017 at 1:33 pm
I put my email into it but still no download files downloaded
Reply
_That_NEET_ says:
October 6, 2017 at 9:48 am
Hello, I’ve subscribed and downloaded the source code, I’m having a problem.
I tried to run the source code but it says like this:
Warning: mysqli_connect(): (HY000/1045): Access denied for user ‘DatabaseUser’@’localhost’ (using password: YES) in D:xamphtdocsPHPdatabase.php on line 2
Warning: mysqli_error() expects parameter 1 to be mysqli, boolean given in D:xamphtdocsPHPdatabase.php on line 2
Please answer, its a urgent project for us and thanks if you do.
Reply
Shoaib Akbar says:
May 18, 2018 at 6:47 pm
hello, i need some assistance, i am using this nice calendar but i am facing some issues
Reply
Thomas Clarke says:
July 13, 2019 at 5:15 pm
I’m trying to add recurring events using your example code, but I’m getting stuck… Any suggestions, or chance you’ll do a update for fullCalendar 4.x?
Reply