Intégration de FullCalendar avec PHP-MySQL

Intégration de FullCalendar avec PHP-MySQL
fullcalendar php mysql

démonstration vidéo du tuto:

Ce plugin consiste à créer un calendrier interactif très complet qui ressemble à « Google Calendar ». Ainsi pouvoir effectuer des opérations de base sur les événements (affichage, ajout, modification…) de manière dynamique grâce à des requêtes AJAX, il permet aussi de manipuler facilement les différents éléments via « drag & drop »

Je commence par télécharger le plugin par ici

Le plugin arrive avec un dossier de démonstration pour tester le calendrier :  le nom du dossier « Demos »  n’hésitez pas à explorer tous les fichiers et à jeter un coup d’oeil sur le code source de chaque page

On prend l’exemple du fichier default.html. seulement la partie Javascript :

<script type="text/javascript">
$(document).ready(function() {

 var date = new Date();
 var d = date.getDate();
 var m = date.getMonth();
 var y = date.getFullYear();

 $('#calendar').fullCalendar({
 editable: true,
 events: [

 {
 title: 'Lunch',
 start: new Date(y, m, d, 12, 0),
 end: new Date(y, m, d, 14, 0),
 allDay: false
 },
 {
 title: 'Birthday Party',
 start: new Date(y, m, d+1, 19, 0),
 end: new Date(y, m, d+1, 22, 30),
 allDay: false
 }
 ]
 });

 });
</script>

Ne vous en faites pas s’il ne correspond pas à ce que vous avez j’ai juste supprimé quelques événements.

d’après le code chaque événement est caractérisé par (title : titre, start : date début, end : date fin)

La base de données va être alors sous cette forme : (code SQL)– Nom de la base de données: ‘fullcalendar’


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

Le code php pour lister les événements (au format JSON) :   fichier events.php :

<?php
// liste des événements
 $json = array();
 // requête qui récupère les événements
 $requete = "SELECT * FROM evenement ORDER BY id";

 // connexion à la base de données
 try {
 $bdd = new PDO('mysql:host=localhost;dbname=fullcalendar', 'root', '');
 } catch(Exception $e) {
 exit('Impossible de se connecter à la base de données.');
 }
 // exécution de la requête
 $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));

 // envoi du résultat au success
 echo json_encode($resultat->fetchAll(PDO::FETCH_ASSOC));

?>

Pour afficher les événements sur le calendrier on va utiliser AJAX, le fichier json.html donne un exemple de comment lire les données JSON.

On va l’adapter : j’ajoute seulement le chemin vers le fichier events.php

events: « http://localhost/fullcalendar/events.php »

je teste maintenant, n’oubliez pas d’ajouter quelques événements dans la table ‘evenement’

fullcalendar-php-mysql 2

Comment faire maintenant si je veux ajouter un événement ? Vous allez voir que c’est simple :

On va ouvrir le fichier selectable.html toujours dans le dossier demos : lorsque nous choisissons une plage de dates une fenêtre ‘boite de dialogue’ s’ouvre pour mentionner  le titre de l’événement

On va utiliser le code de la page pour ajouter des événements dans la base de données.

Le code Javascripte pour envoyer une requete AJAX au fichier add_events.php

selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
 var title = prompt('Event Title:');
 if (title) {
 start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
 end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
 $.ajax({
 url: 'http://localhost/fullcalendar/add_events.php',
 data: 'title='+ title+'&start='+ start +'&end='+ end ,
 type: "POST",
 success: function(json) {
 alert('OK');
 }
 });
 calendar.fullCalendar('renderEvent',
 {
 title: title,
 start: start,
 end: end,
 allDay: allDay
 },
 true // make the event "stick"
 );
 }
 calendar.fullCalendar('unselect');
}

Le fichier add_events.php permet d’enregistrer l’évenement dans la base de données MySQL :

<?php

$title=$_POST['title'];
$start=$_POST['start'];
$end=$_POST['end'];

// connexion à la base de données
 try {
 $bdd = new PDO('mysql:host=localhost;dbname=fullcalendar', 'root', '');
 } catch(Exception $e) {
 exit('Impossible de se connecter à la base de données.');
 }

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

Maintenant si je veux modifier un événement :

eventDrop va me permettre de détecter quand il y a un ‘drag & drop ’. eventResize détecte le changement de la longueur de l’événement.

editable: true,
eventDrop: function(event, delta) {
 start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
 end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
 $.ajax({
 url: 'http://localhost/fullcalendar/update_events.php',
 data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
 type: "POST",
 success: function(json) {
 alert("OK");
 }
 });
},
eventResize: function(event) {
 start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
 end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
 $.ajax({
 url: 'http://localhost/fullcalendar/update_events.php',
 data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
 type: "POST",
 success: function(json) {
 alert("OK");
 }
 });

}

eventDrop, eventResize sont bien expliquées dans la documentation officielle 

Le fichier pour effectuer la modification : update_events.php

<?php

/* VALUES */
$id=$_POST['id'];
$title=$_POST['title'];
$start=$_POST['start'];
$end=$_POST['end'];

// connexion à la base de données
 try {
 $bdd = new PDO('mysql:host=localhost;dbname=fullcalendar', 'root', '');
 } catch(Exception $e) {
 exit('Impossible de se connecter à la base de données.');
 }

$sql = "UPDATE evenement SET title=?, start=?, end=? WHERE id=?";
$q = $bdd->prepare($sql);
$q->execute(array($title,$start,$end,$id));

?>

J’espère que ce tuto vous permettrait de bien commencer avec FullCalendar.
N’hésitez pas à poster vos commentaires
Merci.