Thursday, 21 December 2017

Jquery Fullcalendar Integration with PHP and Mysql

If you looking for Web tutorial for How to use FullCalendar.js plugin with PHP dynamic website for scheduling our meeting or event on particular date and time. So in this post we have discuss How to Integrate Jquery FullCalendar Plugin with PHP server side script and Mysql database table. If you have working website for event management like schedule meeting or plan any task on particular date and that details we can see on web page in calendar format. For this things you can use this Fullcalender plugin is the better option than other.

FullCalendar.js plugin is javascript event calendar and this plugin we can use any web technology and it is easy to use any server side script like PHP. In short with this plugin we can play with database like Mysql also. It is a jquery library and it is displays calendar on web page with events which we have schedule on particular date and time. This is also provide not only month calendar details but also it also display details calendar like week and particular day hours details also. This plugin is very easy to use, for example we want to initialize this plugin on particular page then we have just write fullCalendar() method and this plugin will activate on particular page.

For discuss how to integrate this plugin with PHP and Mysql database, here we have make simple CRUD(Create, Read, Update, Delete) operation has been done with PHP Script with Mysql Data. First we have load data from database and display on calendar, so for this we have use events method. This method will called PHP page and from server it will send data in JSON string format and that data will display on calendar. Same way for add new event, so we have use select method of this plugin. By this method we can click on particular date cell then we can add new event of that day. After adding new event now we want to change date or time of particular event, so for this we have use eventResize and eventDrop method. By using this method we can change date and time of event. And lastly we want to remove particular event. So for this we have use eventClick method, by using this method when we have click on any event this it will triggered ajax request for remove event data from mysql table. So this way we can do Insert, Update, Delete and Select data operation with this Plugin by using PHP script with Mysql. Below we have also provide source code also.









Source Code


index.php



<?php
//index.php




?>
<!DOCTYPE html>
<html>
 <head>
  <title>Jquery Fullcalandar Integration with PHP and Mysql</title>
  <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 calendar = $('#calendar').fullCalendar({
    editable:true,
    header:{
     left:'prev,next today',
     center:'title',
     right:'month,agendaWeek,agendaDay'
    },
    events: 'load.php',
    selectable:true,
    selectHelper:true,
    select: function(start, end, allDay)
    {
     var title = prompt("Enter 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:"insert.php",
       type:"POST",
       data:{title:title, start:start, end:end},
       success:function()
       {
        calendar.fullCalendar('refetchEvents');
        alert("Added Successfully");
       }
      })
     }
    },
    editable:true,
    eventResize:function(event)
    {
     var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
     var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
     var title = event.title;
     var id = event.id;
     $.ajax({
      url:"update.php",
      type:"POST",
      data:{title:title, start:start, end:end, id:id},
      success:function(){
       calendar.fullCalendar('refetchEvents');
       alert('Event Update');
      }
     })
    },

    eventDrop:function(event)
    {
     var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
     var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
     var title = event.title;
     var id = event.id;
     $.ajax({
      url:"update.php",
      type:"POST",
      data:{title:title, start:start, end:end, id:id},
      success:function()
      {
       calendar.fullCalendar('refetchEvents');
       alert("Event Updated");
      }
     });
    },

    eventClick:function(event)
    {
     if(confirm("Are you sure you want to remove it?"))
     {
      var id = event.id;
      $.ajax({
       url:"delete.php",
       type:"POST",
       data:{id:id},
       success:function()
       {
        calendar.fullCalendar('refetchEvents');
        alert("Event Removed");
       }
      })
     }
    },

   });
  });
   
  </script>
 </head>
 <body>
  <br />
  <h2 align="center"><a href="#">Jquery Fullcalandar Integration with PHP and Mysql</a></h2>
  <br />
  <div class="container">
   <div id="calendar"></div>
  </div>
 </body>
</html>


load.php



<?php

//load.php

$connect = new PDO('mysql:host=localhost;dbname=testing', 'root', '');

$data = array();

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

$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();

foreach($result as $row)
{
 $data[] = array(
  'id'   => $row["id"],
  'title'   => $row["title"],
  'start'   => $row["start_event"],
  'end'   => $row["end_event"]
 );
}

echo json_encode($data);

?>


insert.php



<?php

//insert.php

$connect = new PDO('mysql:host=localhost;dbname=testing', 'root', '');

if(isset($_POST["title"]))
{
 $query = "
 INSERT INTO events 
 (title, start_event, end_event) 
 VALUES (:title, :start_event, :end_event)
 ";
 $statement = $connect->prepare($query);
 $statement->execute(
  array(
   ':title'  => $_POST['title'],
   ':start_event' => $_POST['start'],
   ':end_event' => $_POST['end']
  )
 );
}


?>


update.php



<?php

//update.php

$connect = new PDO('mysql:host=localhost;dbname=testing', 'root', '');

if(isset($_POST["id"]))
{
 $query = "
 UPDATE events 
 SET title=:title, start_event=:start_event, end_event=:end_event 
 WHERE id=:id
 ";
 $statement = $connect->prepare($query);
 $statement->execute(
  array(
   ':title'  => $_POST['title'],
   ':start_event' => $_POST['start'],
   ':end_event' => $_POST['end'],
   ':id'   => $_POST['id']
  )
 );
}

?>


delete.php



<?php

//delete.php

if(isset($_POST["id"]))
{
 $connect = new PDO('mysql:host=localhost;dbname=testing', 'root', '');
 $query = "
 DELETE from events WHERE id=:id
 ";
 $statement = $connect->prepare($query);
 $statement->execute(
  array(
   ':id' => $_POST['id']
  )
 );
}

?>


Database



--
-- Database: `testing`
--

-- --------------------------------------------------------

--
-- Table structure for table `events`
--

CREATE TABLE IF NOT EXISTS `events` (
  `id` int(11) NOT NULL,
  `title` varchar(255) NOT NULL,
  `start_event` datetime NOT NULL,
  `end_event` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `events`
--
ALTER TABLE `events`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `events`
--
ALTER TABLE `events`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

9 comments:

  1. edit and update is not working, when click on events it gives the option to remove event

    ReplyDelete
    Replies
    1. If you are creative, you can tweak it on your own. I did it and it's working perfectly for this site: https://social.beraty.com

      Delete
  2. Hi.
    how to remove 12a in calendar

    ReplyDelete
    Replies
    1. How to change color dynamically fc-content class. The code stops working when i wrote a script to apply css for current class?

      Delete
  3. If I click a date then I click day button then i want that day's day view and similarly by clicking Week button I want to see that week's week view. Is there any method to do that?
    T.I.A.

    ReplyDelete
  4. hi..
    how to remove 12a in calendar

    ReplyDelete
  5. hi, your project is really cool. I followed your work. While i am inserting any event, its shows event updated successfully. but, in appearing on it.

    ReplyDelete
  6. how to update and delete event from calender

    ReplyDelete