Jquery Fullcalendar Integration Amongst Php In Addition To Mysql

-
This plugin is to practise a comprehensive interactive calendar that looks similar "Google Calendar". And to perform basic operations on events (display, add, edit) dynamically through AJAX requests, it too allows to easily manipulate the diverse elements via "drag & drop".
fig: Screen dump of output

Step1 : Download the jQuery fullcalendar plugin past times here
You involve to grab the required scripts too css. You tin abide by what y'all involve to become far piece of occupation past times looking at default.html file.
The plugin comes amongst a exhibit files to examination the calendar: the advert of the folder is "Demos". Do non hesitate to explore all the files too accept a await at the source code of each page to sympathise the differences.

Step 2 : Create database called 'fullcalendar' too practise tabular array 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 volition involve next 3 php files to direct maintain an AJAX asking to display, add together too edit the events.
1. events.php - We volition utilisation the code to connect to a MySql database amongst PHP too generate a json string for Fullcalendar.
2. add_events.php - We volition utilisation the code to add together events to the database.
3. update_events.php - We volition utilisation the code to update events to the database.
4. default.html - frontend of the calendar. We volition perform the ajax requests to become far 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 = novel PDO('mysql:host=localhost;dbname=fullcalendar', 'root', 'root');  } catch(Exception $e) {   exit('Unable to connect to database.');  }  // Execute the inquiry  $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));   // sending the encoded effect 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 endeavour { $bdd = novel 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 endeavour {  $bdd = novel 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 appointment = novel Date();   var d = date.getDate();   var one thousand = 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 championship = 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='+ maiden off +'&end='+ terminate +'&url='+ url ,    type: "POST",    success: function(json) {    alert('Added Successfully');    }    });    calendar.fullCalendar('renderEvent',    {    title: title,    start: start,    end: end,    allDay: allDay    },    true // brand the trial "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='+ maiden off +'&end='+ terminate +'&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='+ maiden off +'&end='+ terminate +'&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 together delete events?
The below code has non been tested past times myself. I cause got copied it from the comment box. Hopefully it works. 
 eventClick: function(event) { var conclusion = confirm("Do y'all actually desire to practise 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/
Sumber http://developer-paradize.blogspot.com

Comments

Post a Comment

Popular posts from this blog

What Are The Main Components of a Computer System

-
Each part has a purpose and this list will help give you a brief idea of what the purpose if for each. Tower: The tower or computer case is there to protect the components inside. The case works to protect the parts against electrical shock, dirt and other sources of danger that surround your computer. Power Supply: The power supply is found secure inside your tower and offers the main source of power to the motherboard and other components such as your hard drive and Rom drives. The power supply can be changed out for a larger wattage one to ensure better power and cooling to the parts installed on your system. Motherboard: The motherboard acts as the heart of the computer where everything ties into it and works from it. The slots on the motherboard are available for an assortment of components such as the CPU, memory, video, sound, TV tuners etc. CPU: The central processing unit, otherwise known simply as the CPU is the brains of the sy...
Read more

Top Qualities To Look For In An IT Support Team

-
Regardless of how "state of the art" or "updated" your company's technical systems may be, they will at one time or another encounter glitches or breakdowns that will require immediate attention. A company that experiences such issues must have an IT support team that they can turn to in order to acquire fixes and upgrades. Otherwise, a company will experience substantial "down time" or may even lose clients. This could result in life-long issues for the company and could ultimately result in a loss of profit. The best solution to avoid such detrimental issues is to obtain the services of an IT support provider that can prevent such situations from arising. You will need to take advantage of IT support London services that realize that your company will grow over time, and know how to adapt and maintain your technical services to keep up and manage this growth. Additionally, you will only want to deal with an IT su...
Read more

How To Integrate Google Adwords Api Into Codeigniter?

-
Image
One blogger gave me reckon Just add together all the api documents to the third_party folder in addition to ask the library from your controller or library in addition to voilà! Figure: Google Adwords API Hierarchy After many hours of searching, reading in addition to testing I was successful to integrate AdWords API PHP Client Library into Codeigniter 2.X. Step yesteryear footstep conduct on how to integrate Google Adwords API into Codeigniter. Google Adwords API into Codeigniter # Steps Description 1. Download AdWords API PHP Client Library This customer library makes it easier to write PHP applications that programmatically access the AdWords API or DoubleClick Ad Exchange Buyer API. I accept downloaded version 4.5.1( adwords_api_php_4.5.1 ) 2. Extract the compressed archive (.zip or .tar.gz) in addition to glue the src folder within codeigniter's third_party folder. Grab solely src folder fr...
Read more