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' /> <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.formatDate(start, "yyyy-MM-dd HH:mm:ss"); var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss"); $.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.formatDate(event.start, "yyyy-MM-dd HH:mm:ss"); var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss"); $.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.formatDate(event.start, "yyyy-MM-dd HH:mm:ss"); var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss"); $.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></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://jamelbaz.com/tutos/integration-de-fullcalendar-avec-php-mysql, http://arshaw.com/fullcalendar/
source : http://tempo.co, http://developer-paradize.blogspot.com, http://twitter.com
0 Response to "[upload] jQuery fullcalendar integration with PHP and MySQL"
Posting Komentar