How to integrate jQuery Fullcalendar using Bootstrap, PHP and MySQL ?

How to integrate jQuery Fullcalendar using Bootstrap, PHP and MySQL ?

In this post we will give you information about How to integrate jQuery Fullcalendar using Bootstrap, PHP and MySQL ?. Hear we will give you detail about How to integrate jQuery Fullcalendar using Bootstrap, PHP and MySQL ?And how to use it also give you demo for it if it is necessary.

Today, i would like to share with you integration of jquery full calendar events crud operation using bootstrap, php & mysql example.

Fullcalendar is jquery library that provide us to display calendar with events and more. Fullcalendar js provide year, month, week and day calendar for displaying and it amazing with drag & drop events management. If you are working on event management, task management or any thing that related date to date, at that time if you use event calendar like fullcalendar then it’s better.

In this example we will create “events” table in mysql database and create crud operation using jquery ajax like as bellow.

1)Event Lists

2)Create Event

3)Update Event

4)Delete Event

So, let’s follow full example of fullcalendar events example using php mysql. After follow all step you will get layout as like bellow:

Preview:

Step 1: Create events table

In this step we will create new new table “events” in database. You can use following SQL Query for create “events” table. So let’s create using bellow SQL query:

item table:

CREATE TABLE 'events' (

'id' int(11) NOT NULL,

'title' varchar(255) COLLATE utf8_bin NOT NULL,

'start' datetime NOT NULL,

'end' datetime DEFAULT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

Step 2: Create DB Configuration File

In this step, we require to create database configuration file, here we will set database name, username and password. So let’s create “db_config.php” file on your root directory and put bellow code:

db_config.php

<?php


$bdd = new PDO('mysql:host=localhost;dbname=laravel_test', 'root', 'root');


?>

Also see:Laravel 5 Ajax CRUD with Pagination example and demo from scratch

Step 3: Create View File

In this step we will create index.php view file, that will be render full calendar layout. In this file we will write jquery code and ajax code. In this file i used following css and js files :

1)fullcalendar.css

2)bootstrap.css

3)jquery.min.js

4)moment.min.js

5)fullcalendar.min.js

Now let’s create index.php file and put bellow code:

index.php

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />

<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 date = new Date();

var d = date.getDate();

var m = date.getMonth();

var y = date.getFullYear();


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

editable: true,

header: {

left: 'prev,next today',

center: 'title',

right: 'month,agendaWeek,agendaDay'

},


events: "events.php",


eventRender: function(event, element, view) {

if (event.allDay === 'true') {

event.allDay = true;

} else {

event.allDay = false;

}

},

selectable: true,

selectHelper: true,

select: function(start, end, allDay) {

var title = prompt('Event Title:');


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: 'add_events.php',

data: 'title='+ title+'&start='+ start +'&end='+ end,

type: "POST",

success: function(json) {

alert('Added Successfully');

}

});

calendar.fullCalendar('renderEvent',

{

title: title,

start: start,

end: end,

allDay: allDay

},

true

);

}

calendar.fullCalendar('unselect');

},


editable: true,

eventDrop: function(event, delta) {

var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");

var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");

$.ajax({

url: 'update_events.php',

data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,

type: "POST",

success: function(json) {

alert("Updated Successfully");

}

});

},

eventClick: function(event) {

var decision = confirm("Do you really want to do that?");

if (decision) {

$.ajax({

type: "POST",

url: "delete_event.php",

data: "&id=" + event.id,

success: function(json) {

$('#calendar').fullCalendar('removeEvents', event.id);

alert("Updated Successfully");}

});

}

},

eventResize: function(event) {

var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");

var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");

$.ajax({

url: 'update_events.php',

data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,

type: "POST",

success: function(json) {

alert("Updated Successfully");

}

});

}

});

});


</script>

<style>

body {

margin-top: 40px;

text-align: center;

font-size: 14px;

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

}

#calendar {

width: 650px;

margin: 0 auto;

}

</style>

</head>


<body>

<h2>Full calendar php mysql example</h2>

<br/>

<div id='calendar'></div>

</body>


</html>


Step 4: Create Ajax File

In last step we will create four files for ajax method and there are listed bellow:

1)events.php

2)add_events.php

3)delete_event.php

4)update_events.php

Now we will create those four files and put bellow code for this file one by one:

events.php

<?php


$json = array();


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


try {

require "db_config.php";

} catch(Exception $e) {

exit('Unable to connect to database.');

}


$resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));


echo json_encode($resultat->fetchAll(PDO::FETCH_ASSOC));


?>

add_events.php

<?php


$title = $_POST['title'];

$start = $_POST['start'];

$end = $_POST['end'];


try {

require "db_config.php";

} catch(Exception $e) {

exit('Unable to connect to database.');

}


$sql = "INSERT INTO events (title, start, end) VALUES (:title, :start, :end )";

$q = $bdd->prepare($sql);

$q->execute(array(':title'=>$title, ':start'=>$start, ':end'=>$end));


?>

delete_event.php

<?php


$id = $_POST['id'];


try {

require "db_config.php";

} catch(Exception $e) {

exit('Unable to connect to database.');

}


$sql = "DELETE from events WHERE id=".$id;

$q = $bdd->prepare($sql);

$q->execute();


?>

update_events.php

<?php


$id = $_POST['id'];

$title = $_POST['title'];

$start = $_POST['start'];

$end = $_POST['end'];


try {

require "db_config.php";

} catch(Exception $e) {

exit('Unable to connect to database.');

}


$sql = "UPDATE events SET title=?, start=?, end=? WHERE id=?";

$q = $bdd->prepare($sql);

$q->execute(array($title,$start,$end,$id));


?>

Ok, now we are ready to run our Full Calendar example. So let’s run bellow command on your root directory for quick run:

php -S localhost:8000

Now you can open bellow URL on your browser:

Also see:PHP MySQL – Simple Image Gallery CRUD example from scratch

http://localhost:8000/

I hope it can help you….

Hope this code and post will helped you for implement How to integrate jQuery Fullcalendar using Bootstrap, PHP and MySQL ?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  5  =  15

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US