Code: jQuery fullcalendar v2 and above integration with PHP and MySQL

This plugin is to create a comprehensive interactive calendar that looks like "Google Calendar". And to perform basic operations on events (display, add, edit) dynamically through AJAX requests, it also allows to easily manipulate the various elements via "drag & drop".

fig: Screen dump of output

Step1 : Download the jQuery fullcalendar plugin by here
You need to grab the required scripts and css. You can find what you need to make it work by looking at default.html file.
The plugin comes with a demo files to test the calendar: the name of the folder is "Demos". Do not hesitate to explore all the files and take a look at the source code of each page to understand the differences.

Step 2 : Create database called 'fullcalendar' and create table called 'evenement'

CREATE TABLE `evenement` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) COLLATE utf8_bin NOT NULL,
  `start` datetime NOT NULL,
  `end` datetime DEFAULT NULL,
  `url` varchar(255) COLLATE utf8_bin NOT NULL,
  `allDay` varchar(255) COLLATE utf8_bin NOT NULL DEFAULT 'false',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=7 ;

Step 3 : Breakdown of required files
You will need following three php files to handle an AJAX request to display, add and edit the events.
1. events.php - We will use the code to connect to a MySql database with PHP and generate a json string for Fullcalendar.
2. add_events.php - We will use the code to add events to the database.
3. update_events.php - We will use the code to update events to the database.
4. default.html - frontend of the calendar. We will perform the ajax requests to make it dynamic calendar.
Step 4 : Complete source code
i. events.php

<?php
// List of events
 $json = array();

 // Query that retrieves events
 $requete = "SELECT * FROM evenement ORDER BY id";

 // connection to the database
 try {
 $bdd = new PDO('mysql:host=localhost;dbname=fullcalendar', 'root', 'root');
 } catch(Exception $e) {
  exit('Unable to connect to database.');
 }
 // Execute the query
 $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));

 // sending the encoded result to success page
 echo json_encode($resultat->fetchAll(PDO::FETCH_ASSOC));

?>

ii. add_events.php

// Values received via ajax
$title = $_POST['title'];
$start = $_POST['start'];
$end = $_POST['end'];
$url = $_POST['url'];
// connection to the database
try {
$bdd = new PDO('mysql:host=localhost;dbname=fullcalendar', 'root', 'root');
} catch(Exception $e) {
exit('Unable to connect to database.');
}

// insert the records
$sql = "INSERT INTO evenement (title, start, end, url) VALUES (:title, :start, :end, :url)";
$q = $bdd->prepare($sql);
$q->execute(array(':title'=>$title, ':start'=>$start, ':end'=>$end,  ':url'=>$url));
?>

iii. update_events.php

<?php

/* Values received via ajax */
$id = $_POST['id'];
$title = $_POST['title'];
$start = $_POST['start'];
$end = $_POST['end'];

// connection to the database
try {
 $bdd = new PDO('mysql:host=localhost;dbname=fullcalendar', 'root', 'root');
 } catch(Exception $e) {
exit('Unable to connect to database.');
}
 // update the records
$sql = "UPDATE evenement SET title=?, start=?, end=? WHERE id=?";
$q = $bdd->prepare($sql);
$q->execute(array($title,$start,$end,$id));
?>

iv. default.html

<!DOCTYPE html>
<html>
<head>
<link href='css/fullcalendar.css' rel='stylesheet' />
<script src='js/jquery-1.9.1.min.js'></script>
<script src='js/jquery-ui-1.10.2.custom.min.js'></script>
<script src='js/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: "http://localhost:8888/fullcalendar/events.php",
   
   // Convert the allDay from string to boolean
   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:');
   var url = prompt('Type Event url, if exits:');
   if (title) {
   var start = $.fullCalendar.moment(start).format();
   var end = $.fullCalendar.moment(end).format();
   $.ajax({
   url: 'http://localhost:8888/fullcalendar/add_events.php',
   data: 'title='+ title+'&start='+ start +'&end='+ end +'&url='+ url ,
   type: "POST",
   success: function(json) {
   alert('Added Successfully');
   }
   });
   calendar.fullCalendar('renderEvent',
   {
   title: title,
   start: start,
   end: end,
   allDay: allDay
   },
   true // make the event "stick"
   );
   }
   calendar.fullCalendar('unselect');
   },
   
   editable: true,
   eventDrop: function(event, delta) {
   var start = $.fullCalendar.moment(event.start).format();
   var end = $.fullCalendar..moment(event.end).format();
   $.ajax({
   url: 'http://localhost:8888/fullcalendar/update_events.php',
   data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
   type: "POST",
   success: function(json) {
    alert("Updated Successfully");
   }
   });
   },
   eventResize: function(event) {
   var start = $.fullCalendar.moment(event.start).format();
   var end = $.fullCalendar.moment(event.end).format();
   $.ajax({
    url: 'http://localhost:8888/fullcalendar/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: 900px;
  margin: 0 auto;
  }

</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>

How to add delete events?
The below code has not been tested by myself. I have copied it from the comment box. Hopefully it works.

eventClick: function(event) {
var decision = confirm("Do you really want to do that?"); 
if (decision) {
$.ajax({
type: "POST",
url: "your url/delete_events.php",

data: "&id=" + event.id
});
$('#calendar2').fullCalendar('removeEvents', event.id);

} else {
}
}

delete_event.php

$sql = "DELETE from evenement WHERE id=".$id;
$q = $bdd->prepare($sql);
$q->execute();

REF: http://developer-paradize.blogspot.com/2013/06/jquery-fullcalendar-integration-with.html?showComment=1425539469141#c6027428286141085296

10 comments:

UnknownJune 4, 2015 at 1:34 PM
This comment has been removed by the author.
UnknownJune 4, 2015 at 1:34 PM
This comment has been removed by the author.
UnknownJune 4, 2015 at 2:47 PM
Hello dear,. pls help me.. I used codeigniter and fullcalendar, but add event is not working, i search the error many days,
It's my code, and sorry my bad english

when i see page source, url is right

select: function(start, end, allDay) {
var title = prompt('Event Title:');
if(title) {
calendar.fullCalendar('renderEvent',{ title: title,start: start, end: end,allDay: allDay
},true // make the event "stick"
);

var startDateString = $.fullCalendar.formatDate(startDate, 'yyyy-MM-dd');
var endDateString = $.fullCalendar.formatDate(endDate, 'yyyy-MM-dd');

$.ajax({
type: 'POST',
url: ' ',
data: {
startDate: startDateString,
endDate: endDateString,
eventTitle: title
},
dateType: 'json',
success: function(){ alert("success"); }
});
}
calendar.fullCalendar('unselect');
},
blogger.comNovember 13, 2021 at 6:39 PM
This is very nice blog Do you feel stress out throughout the months because of your busier lifestyle? If yes, then make use of 2022 Calendar Printable Pdf. You can download the calendar from My Printable Worksheet; you become acquainted with how to locate your "best" season of day. You can utilize the schedule wherever you might be in your home, working environment anyplace when you want to deal with your work.

Thursday, March 5, 2015

jQuery fullcalendar v2 and above integration with PHP and MySQL

This plugin is to create a comprehensive interactive calendar that looks like "Google Calendar". And to perform basic operations on events (display, add, edit) dynamically through AJAX requests, it also allows to easily manipulate the various elements via "drag & drop".

10 comments: