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;

105 comments:

  1. how to create gps based vehicle tracking system in php mysql.

    ReplyDelete
  2. php or javascript based live video chating using webcam

    ReplyDelete
  3. Sir, I am not able to see the events on my calendar , but when I open my load.php page all the events are present, so basically ny insert page is also working properly. So plz help me in bring my events to the calendar page.... ??

    ReplyDelete
  4. very useful code...
    sometimes we see but it dosen't work but this is workable nd useful

    ReplyDelete
  5. Sir, Events Is Successfully added But not showing on Calendar.....Please Solve it

    ReplyDelete
  6. Thank you very much for the tutorial, but when I try it, the click on existing event, it only allows deletion, I want to click on the event and modify the event name and save. Also modify db to include another field and show the new field under the event name and update accordingly. Could you show an example of how to code this? I would be greatly appreciative. I am learning but have tried everything I know to try to achieve this. Thank you for your time.

    ReplyDelete
  7. Thank you for sharing this integration that you were able to create! I have implemented it at the small business I work at as a time-off request calendar/database. Thanks again!

    ReplyDelete
  8. I tried this work..but i can't see events on my calendar....when i add new events (the message "added successfully " don't appear) also events are not saved in database.....not visible on the calendar.....can you please guide me to resolve this issue ..

    ReplyDelete
  9. Great job brother. Every thing is working. Thanks a lot.

    ReplyDelete
  10. Really great article. Is there any way i can block the dates so that only one event can be added in a date range.

    ReplyDelete
  11. Super cool, thank you so much!

    ReplyDelete
  12. how can I minimize the size of calendar?

    ReplyDelete
  13. 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. try this one : CREATE TABLE IF NOT EXISTS `events` (
      `id` int(11) NOT NULL,
      `title` varchar(255) NOT NULL,
      `start_event` date NOT NULL,
      `end_event` date NOT NULL
      ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

      Delete
    3. if you want to update, all you have to do is to drag and drop.

      Delete
    4. Tosey, It is working for you because you must have refresh page and then edit or deleted event. then its working fine. but when you add and immidiate delete it without reloading its not working. ID UNDEFINED.

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

    ReplyDelete
    Replies
    1. just change the variable type of you end_event and start_event in your database. instead of using DATETIME change it in DATE type. :)

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

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

      Delete
    4. the type of start_event and end_event in your database that change to "data"

      Delete
    5. the type of start_event and end_event in your database that change to "data"

      Delete

    6. .fc-time {
      visibility: hidden;
      }

      Delete
  15. 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
  16. hi..
    how to remove 12a in calendar

    ReplyDelete
    Replies
    1. Add: displayEventTime: false
      under these lines:
      events: 'load.php',
      selectable:true,
      selectHelper:true,

      Delete
    2. the type of start_event and end_event change to "data" in your database

      Delete
    3. Thank you so much for the extra code!

      Delete
  17. How can you got the id value by event.id ?

    I got "undefined" instead, when i debugged that, there's no "id" key in event value

    ReplyDelete
    Replies
    1. Did you find a solution? I am so frustrated about this...

      Delete
  18. Looks like your code can't handle update "All Day" for eventDrop, but can remove and create new for allDay instead

    ReplyDelete
  19. how to remove – in week view

    ReplyDelete
  20. how to remove – in week view?

    ReplyDelete
  21. My event is not on calendar and also database. Need help please :(

    ReplyDelete
  22. 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
  23. how to update and delete event from calender

    ReplyDelete
  24. how to add a dropdown below enter event title

    ReplyDelete
  25. load.php not working for me any idea event not load on calender the value i enter in it store in database

    ReplyDelete
    Replies
    1. Me also encountered with same problem... Can anybody help me? Please.....

      Delete
  26. where to write code for load.php and insert.php

    ReplyDelete
  27. 12a problem
    solving!!!
    the type of start_event and end_event in your database that change to "data"

    ReplyDelete
  28. how to add national holiday?

    ReplyDelete
  29. it's working ! thanks. I have a question, if I want to add more info like telefon number is there a limitation on string lenght ?

    ReplyDelete
  30. How would I go about changing the CSS of this page? Currently designing a booking portal for my company and I need certain dates to be inaccessible depending on IF ELSE statements and when they do pick an available date they then need to fill out a form and all the information is sent to an email address? All help would be appreciated.

    ReplyDelete
  31. hi the load.php don`t work
    data are stored in db
    if i call the load.php in browser i can see the json output
    but noting in calendar

    can you help
    thx

    ReplyDelete
  32. can i change language? for example italian?

    ReplyDelete
  33. anyone know how to make this a week view only?

    ReplyDelete
    Replies
    1. Got it! add "defaultView: 'agendaWeek'," above the "events: ' events: 'load.php'," that will make week view default then you can hide the buttons

      Delete
  34. i would like to change language settings... is it possible?

    ReplyDelete
  35. How to change colour of each event cell dynamically?

    ReplyDelete
  36. My events is being stored in database but not in my website calendar

    ReplyDelete
  37. how to add the edit function? please help me.

    ReplyDelete
  38. On loading no events appear in the calander and insert work well in database but cant appear also in the calander what is the problem ????

    ReplyDelete
  39. please help if i convert this code according to laravel i dont get the events accordingly date what should do for thata

    ReplyDelete
  40. please help if i convert this code according to laravel i dont get the events accordingly date what should do for thata

    ReplyDelete
  41. Events are stored in database but now showing on calendar

    ReplyDelete
  42. Perfect, everything works, I'm using it to mark vacation rental dates. To each insert I have attributed an id for each rent. Thank you

    ReplyDelete
  43. Perfect, everything works, I'm using it to mark vacation rental dates. To each insert I have attributed an id for each rent. Thank you

    ReplyDelete
  44. Is there any way to change the language, or the Startdate, the things mentioned in the FullCalandar Doc seem to not be working.

    ReplyDelete
  45. Can you help me to Connect it with the Newer version of FullCalendar? (V4).
    Kind regards

    ReplyDelete
  46. mobile user can't add a new events

    ReplyDelete
  47. How could i add the mouseover Tooltip ? i try but dost show

    ReplyDelete
  48. hi. why if i'm entering an event,it didnt view at the calendar

    ReplyDelete
  49. como anexar un formulario para capturar el evento

    ReplyDelete
  50. help me to make update event success

    ReplyDelete
  51. How to get a popup on event Click method

    ReplyDelete
  52. fullcalendar.min.js:6 Uncaught TypeError: Cannot read property 'hasTime' of undefined when try to load data

    ReplyDelete
  53. You are genius, no wasting time THX dude

    ReplyDelete
  54. can someone help me to add log in and register to this

    ReplyDelete
  55. hi brother need help
    if date example : start_event : 25 and end_event : 27
    why calendar just color 25 and 26 how to color with 27
    thank before

    ReplyDelete
  56. how to change event color dynamically

    ReplyDelete
  57. the edit is working but there's no output in the calendar. Any help?

    ReplyDelete
  58. Your free Printable calendar2021 templates are ready. Choose from a selection of 2021 annual blank calendars and agendas. Just click on any of the thumbnails to see the full sized image, then you can print from your browser or save the image for later.

    ReplyDelete
  59. in the case of nested json, how would the ajax script look?

    ReplyDelete
  60. how to get id from url insert in ajax ?

    ReplyDelete
  61. Hi sir can you writehow to add payment method in php... Its a request plz. Your ocde is very simple and easy to understand. Thanks !

    ReplyDelete
  62. easy css change for different events color ?

    ReplyDelete
  63. Hi, how to change the time slot of the calendar?

    ReplyDelete
  64. anyone knows how to pass a variable to load.php?
    want to select all where...

    ReplyDelete
  65. error TS2300: Duplicate identifier 'editable'.
    i drop it and all works without the delete commande

    ReplyDelete
  66. can i know how to change the color of the background

    ReplyDelete
    Replies
    1. Hi. Did you manage to solve this? if yes, how did you do it?

      Delete
  67. How to add the background color on events?

    ReplyDelete
  68. How can you make the calendar display by week as default and how do you only show the tomes 9-5

    ReplyDelete
  69. i want show more value on calander

    ReplyDelete