Wednesday, June 26, 2013

jQuery fullcalendar integration with PHP and MySQL

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' 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 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 id='calendar'></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/

132 comments:

  1. `allDay` varchar(255) ??

    should be `allDay` boolean (or `allDay` tinyint)

    ReplyDelete
    Replies
    1. thank you for your positive input my friend.. :)

      Delete
  2. thank for the tutorial. Sorry, but i search to remove an events.

    ReplyDelete
  3. If go to week or day and change a event of time, it wil save the time good in the database.
    As an example: start: 2013-08-08 09:00:00 and end: 2013-08-08 11:30:00 allDay: false
    But if i reload the page, the event will be plased in the all-day column, not in the time column. And in the is it still the same as created.
    I have try to set 'allDay' as boolean 0, but no difference.
    Please can u help me and fix this ?

    ReplyDelete
    Replies
    1. i use allday as int width 0 or 1(mysql), so i dont need to transform the value. Its works better and erase some line codes.
      an other interesting thing is to create a procedure in mysql to make the select inside returning the events values. if somebody need i have my own code to create the procedure.

      Delete
  4. Same problems here as Melvin has and not sure how to fix it. Any help from the creator would be much appreciated. =)

    ReplyDelete
  5. Solved it. The array has allDay as string format. Here's my workaround with it:

    // Fetch the events
    events: "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;
    }
    },

    ReplyDelete
    Replies
    1. Thanks for the fixing the problem, it works.

      Delete
    2. Forgiveness for the delay. I was on summer break.
      Great work BluesyBlue. I will update the solution as well with your solution. :)

      Thanks for sharing your working code.

      Delete
    3. hi i am fresher in php. when i am adding any event its add easily but when i refresh the page the events will be disappear what should i do ??

      Delete
  6. Post is updated with working solution. Thanks to BluesyBlue for providing solution. Appreciated. :)

    ReplyDelete
  7. Hi, Anup Shakya.

    At first, thank you for this tutorial. It´s very usefull.
    But, I have a problem:
    I´m using events.php, like yours.
    In MySql I have: start = 2013-09-05 16:30:00, ok?
    But in page default.html, where I see calendar, that data comes from events.php, doesn´t show time. Just date.

    Without Json, I put:
    ...
    events: [{title: 'Lunch',
    start: new Date(2013, 09, 05, 13, 30),
    ...
    and was done.

    Thank you.

    ReplyDelete
    Replies
    1. I have no idea as well. If you could fix it, will you share the problem and solution. :)

      Delete
  8. Hi, thanks for tutorial, how to eliminate a event?

    ReplyDelete
    Replies
    1. you can make function which can delete from backend (eg. mysql) table like other normal Delete method.

      Hope this helps :)

      Delete
  9. hi i have error when try to add second event

    TypeError: t.getFullYear is not a function

    ReplyDelete
    Replies
    1. //You may be overwriting the t date object somewhere.
      Try this

      var t = new Date();
      var y = t.getFullYear();

      Hope it will solve your problem.

      Delete
  10. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. I have checked it the latest fullcalendar 1.6.4 library by downloading from http://arshaw.com/fullcalendar/download/ and it have all files. Nothing is missing. Try again.

      Delete
  11. Hi, mate I don't know whether I have done anything worng but the event's are not displayed in chrome. Works fine in Firefox and Opera

    ReplyDelete
    Replies
    1. Hello Fernando,

      It is funny that I have tested only in Chrome and it is working as it should. May be you are adding something extra in CSS or somewhere that cause Chrome error...

      Delete
    2. OK mate I got it. Thanks for the input :)

      Delete
  12. Hi mate, sorry for bothering you again. I have this issue where I can drag the event only once. It sticks to that place and doesn't update the time either.

    ReplyDelete
    Replies
    1. Thanks a lot Anup Shakya, you gave me exactly what I needed. I really apreciate the time it took you.

      Yuranga Fernando:

      I had the same problem and solved in this way:

      In the evenDrop function I changed the first two lines:

      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");
      }
      });
      },

      What I mean is:
      Instead of
      start = $.fullCalendar......
      end = $.fullCalendar.......
      Write
      var start = $.fullCalendar......
      var end = $.fullCalendar.......

      And the same with eventResize function.

      I hope it helps!

      Delete
    2. Thank you for your input. Greatly appreciated. :)

      Delete
  13. How come the allDay is not save in the db?

    ReplyDelete
    Replies
    1. You must have done something wrong in the script. I tested again with above code and it is working here.

      Delete
  14. I can not add the date on alert, just in sql:
    INSERT INTO eventos(title, start, end) values ('teste', '2013-09-28 01:22:00', '2013-09-28 08:00:00')

    I use
    var start = prompt('Horário de inicio:');
    var end = prompt('Horário de encerramento:');

    how can I do to add the date alert?

    ReplyDelete
  15. If someone has already tried the deletion function of an event could you please share the code here??

    Thanks in advance :)

    ReplyDelete
  16. eventClick: function(event) {
    decisao = confirm("Deseja remover o evento?");
    if (decisao) {
    $.ajax({
    type: "POST",
    url: "http://localhost/academia/static/library/fullcalendar/delete_events.php",
    data: "&id=" + event.id
    });
    $('#calendar').fullCalendar('removeEvents', event.id);
    } else {
    }
    }

    ReplyDelete
    Replies
    1. Thank you very much Mauricio Escobar.
      I've tested the function and it works perfectly.
      I've changed only one line:
      Instead of:
      decisao = confirm("Deseja remover o evento?");
      I wrote:
      var decisao = confirm("Deseja remover o evento?");

      Thanks again Mauricio and Anup.

      Delete
  17. i am having an error which error 404 how can i fix it?

    ReplyDelete
    Replies
    1. 404 means that the page you were trying to reach on a website couldn't be found on their server. So check the path of the file, may be you are putting the file in wrong order or look for name of the file as well.

      Delete
  18. what meant by this line . events: "http://localhost:8888/fullcalendar/events.php",

    ReplyDelete
    Replies
    1. events: "http://localhost:8888/fullcalendar/events.php"
      This is the place where they collect calendar info from backend(mysql) and encode it to JSON format and send it back to jQuery.

      Delete
  19. Thank you for sharing the details of a very useful integration. I setup my calendar according to your guidelines.
    The events appear with the titles, but no start times. If I move (drag & drop) an event, the start times appear properly for all events. If I reload the page, the start times for all events disappear.
    What am I missing?

    ReplyDelete
    Replies
    1. Have you checked if the database is updated with events?

      Delete
    2. Problem solved. I had to set the default value of the 'allDay' boolean field to 'NULL', not 0.

      Delete
  20. When you get back to a month ago and get back, AllDay is not working using your solution.

    ReplyDelete
  21. Thank you so much for your tutorial ^^
    I have a question for you. If I wanna show an attribute from the table by myself, where should I edit the codes? Because the event wont show if I made the database by myself.
    Hope to hear from you soon^^

    ReplyDelete
    Replies
    1. You should edit codes in events.php. This is where you are accessing database. If you made any changes in database, be sure to fix it in add_event.php and update_event.php as well.

      Hope this info. will help you. :)

      Delete
    2. I tried to make a database and table for this calendar by myself (with a different names), but the calendar doesnt show my events in my database :( and when I try using a database and table from you, it works. I wanna make the database and table by myself, what shd I do? :(

      Delete
    3. Create a new database and name it, for example your_database. Then create table inside the database using
      CREATE TABLE `your_table` (
      `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 ;

      Change your_database and your_table to whatever you wanna name it.

      Change the newly created database and table name in the events.php, add_events.php, update_events.php .

      Problem will be solved. :)

      Delete
    4. yes, thank you. I just realized that "title", "start", and "end cant be replace by other words^^

      Delete
  22. Thanks a lot for this tutorial.I would like to know I can I display start and end time also with event in calender..
    Can you please help me....

    ReplyDelete
    Replies
    1. I haven't tried that. I think you need to look up how they are showing event in Day format. You can dig inside javascript library on how it is being generated and displayed in fullcalendar.

      Delete
  23. hello thanks for this tutorial, can you please tell me what should i do for remove events???

    ReplyDelete
    Replies
    1. you should do same as @Mauricio Escobar . I copied his solution from the comment box.
      I haven't tried myself but it may work.

      eventClick: function(event) {
      decisao = confirm("Deseja remover o evento?");
      if (decisao) {
      $.ajax({
      type: "POST",
      url: "http://localhost/academia/static/library/fullcalendar/delete_events.php",
      data: "&id=" + event.id
      });
      $('#calendar').fullCalendar('removeEvents', event.id);
      } else {
      }
      }

      Delete
  24. This script is great but can anyone make a little clearer on how to delete events please?

    ReplyDelete
  25. How i can save new entries with selectable.html ?

    i'm connected with the database ..

    ReplyDelete
  26. make an easier tutorial, and help more people, explain step by step with describtion. thanks buddy :)

    ReplyDelete
  27. I am really confused as to where to add the delete event in the code , doesnt seem to work, any help would be highly appreciated!!

    ReplyDelete
  28. please help me add a popup to edit event(title,start,end).
    Thank

    ReplyDelete
  29. Any helps will be highly appreciated. Share and help. :)

    ReplyDelete
  30. hi,
    can you help me set 1line for date 1-30/31 of a month on month.

    ReplyDelete
  31. hello, how I can include recurring events?
    please help!!!

    ReplyDelete
  32. I need to include recurring events?
    please help

    ReplyDelete
    Replies
    1. You may find the answer here: You will get all the info about the calendar from below documentation.
      http://arshaw.com/fullcalendar/docs/

      Delete
  33. You can find documentation of Fullcalendar from the below website,

    http://arshaw.com/fullcalendar/docs/

    ReplyDelete
  34. there are .zip and where this fact?

    ReplyDelete
  35. The code is perfect! good job. I would like to suggest to you a different css option like bootstrap for dialog windows. Thanks

    ReplyDelete
    Replies
    1. Once i will do that, i will post here as well. :)

      Delete
  36. Thanks for the tutoril :)
    but i have a doubt..
    what if event is to be extended to 3 or 5 days?
    how can i change the end date?

    ReplyDelete
    Replies
    1. For now, if the event is to be extended, first you have to delete old event and then create new with the extended date. I know it is not the optimal solution, but it will work.

      If you find any good solution, do share here. :)

      Good luck.

      Delete
  37. k i waited for some reply.. but yippie got the solution :)

    ReplyDelete
  38. select: function(start, end, allDay) {
    var title = prompt('Event Title:');
    var url = prompt('Type Event url, if exits:');
    if (title) {
    //alert("hello");
    var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
    var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");

    $.ajax({
    url: 'add_events.php',

    data: 'title='+ title+'&start='+ start +'&end='+ end +'&url='+ url ,
    type: "POST",
    success: function(json) {
    alert('Added Successfully');
    window.location.reload();
    location.href="events_description.php";

    }
    });

    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, allDay, revertFunc, jsEvent, ui, view) {
    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: 'update_events.php',
    data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
    type: "POST",
    success: function(json) {
    alert("Updated Successfully");
    window.location.reload();
    }
    });
    },
    eventClick: function(event) {
    alert(event.id);
    var decision = confirm("Do you want to delete event?");
    if (decision==true) {
    $.ajax({
    type: "POST",
    url: "delete_event.php",

    data: "&id=" + event.id

    });
    alert("Deleted Successfully");
    window.location.reload();

    //$('#calendar').fullCalendar('removeEvents', event.id);
    } else {
    }
    },
    eventResize: function(event,jsEvent, ui, view) {
    //alert("hello");
    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: 'update_events.php',
    data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
    type: "POST",
    success: function(json) {
    // alert("please wait");
    }
    });


    },
    eventResizeStop: function(event,jsEvent, ui, view) {
    //alert("hello");
    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: 'update_events.php',
    data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
    type: "POST",
    success: function(json) {
    alert("Updated Successfully");
    window.location.reload();

    }
    });
    }

    });

    });

    ReplyDelete
  39. Hey Guys

    This Calendar is so awesome. I really appreciate it.
    I am very very novice with json.

    I have the following problems:

    1) Upon adding an event, I cannot seem to be able get the time store into the database
    2) My update function does not work at all, It says it has updated succesfully but it does not store in the database.
    3) What is the URL field used for?
    4) I cannot seem to delete the events.
    5) How do i modify events
    5) The calendar does not allow me to drag down events across to Saturday, in fact i cant add an event on Saturday.

    Can some please kindly help?

    Please just kindly upload the default.html with the update, delete that works?

    Please I really appreiate this calendar, it jells in with the website blog I am making.

    ReplyDelete
    Replies
    1. Above code is working perfectly. I think you need to check your database structure. it will work only if you have same tablename like i posted above. URL is optional and only for to redirect to event.

      Try to check if you put all the files in right order.

      Good luck.

      Delete
  40. Is this a valid JSON output? My pho script generates this but fullcalendar is not loading events

    {"start" : 1387488810,"end" : 1387528810,"title" : "Peter Pan baking a cake"}

    ReplyDelete
  41. I can't delete the event. why every time I put the delete coding it will remove the calendar and only left empty page?

    ReplyDelete
    Replies
    1. I think it is the Path/url issue. Look the path where you sent request to delete event via ajax.

      Delete
  42. The code is working perfectly. but it doesnt ask the event start & End time? It assumes the event as all day by default. i am not getting How to Update event title & timing also. please help.

    ReplyDelete
    Replies
    1. With above script, you can update event title and timing. You have to delete the event first and add a event as new again. I know it shouldn't be like this. At that time, i needed above functionality only.

      Delete
  43. can you customize days of a month and events on in 1 line ?
    it's look like 1 2 3 ...30/31
    Thank

    ReplyDelete
  44. Hi, Hi Melvin, Hi BluesyBlue,

    In defaultView: 'agendaDay',

    I get the same error as Melvin in August 9, 2013 at 8:29 AM

    So, the event is placed in the all-day column, instead of in the time column as it should be.

    If I press in "month view", and back to "day view", the problem gets sold. but on each reload the problem is back.

    Any ideas how to fix this?

    ReplyDelete
    Replies
    1. If you can provide me your email address, i will send you my zip file, it is old but it works. Atleast in my computer :)

      Delete
  45. Hi again, I made a jsFiddle and posted on Stackoverflow. Any help would be greatly appreciated ;o)

    http://stackoverflow.com/questions/20970163/fullcalendar-js-defaultview-agendaday-shows-events-in-all-day-section

    ReplyDelete
    Replies
    1. Use the code from http://developer-paradize.blogspot.se/2013/06/jquery-fullcalendar-integration-with.html?showComment=1386836889836#c5212875178841800935

      May be it will solve your problem. I haven't tested it myself.

      Delete
  46. Hi Anup, I just tested the other code you proposed, and it seems to be the same, I get the same error.

    I put it on my server, so that you can see what's happening.

    http://eggings.com/fullcalendar-1.6.4/default.php

    if you reload, the event doesn't show, if you click on month, you see it there, and if you click back in day, it's there. so, there has to be something going on in the loading process. but I can't figure out what it can be.

    any ideas to get me in the right direction.

    thanks
    Sebastian

    ReplyDelete
    Replies
    1. Have you tried to download the fresh copy from http://arshaw.com/fullcalendar/download/

      and try to check if it works for you (demo is included). if it works then you can modify default to your need. In meantime, i will try to see what is the problem.

      In your demo, why it is selecting 'day' as first option.

      Delete
    2. Try http://www.cliptheme.com/demo/clip-one/pages_calendar.html and see how it is implemented. :)

      Delete
  47. hi,i have try this code but not insert a event in database ......

    ReplyDelete
  48. hello guys, i have a problem in drag and drop,
    in left side i have listed titles, i want to add the listed title on date and save it,
    but i can't able to do ...
    if you have any idea ,please help me

    ReplyDelete
    Replies
    1. i have posted the answer below pls check ;)

      Delete
  49. hi,i have try this code but not insert a event in database ......

    ReplyDelete
  50. Hi, great post!! =)
    Save an element after Drop from external div (using "add_events.php")

    // is the "remove after drop" checkbox checked?
    if ($('#drop-remove').is(':checked')) {
    // if so, remove the element from the "Draggable Events" list
    $(this).remove();
    }
    //********************************************//

    //add dropped element to the database
    if(copiedEventObject.title){
    var title = copiedEventObject.title;
    var url = copiedEventObject.url;
    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/fullcalendar/add_events.php',
    data: 'title='+ title+'&start='+ start +'&end='+ end +'&url='+ url ,
    type: "POST",
    });
    }
    calendar.fullCalendar('unselect');
    window.location.reload('calendar'); //avoid update failure after drop
    }

    ReplyDelete
    Replies
    1. PS: add this code in the drag & drop function

      Delete
  51. have been trying to get the delete function working for days||| finally cracked it doing the following :-

    add this to the default.html

    eventClick: function(event) {
    var decision = confirm("Do you really want to delete this?");
    if (decision==true) {
    $.ajax({
    url: "your url/delete_events.php",
    data: '&id=' + event.id+'$id='+ event.id,
    type: "POST",
    });
    $('#calendar').fullCalendar('removeEvents', event.id);

    } else {
    }
    }

    });

    ReplyDelete
  52. create this as delete_events.php
    you need to put in the php tags beginning and end of this script as with them in the post the post will not show correctly

    php beginning tag here

    // Values received via ajax
    $id = $_POST['id'];
    //connection to the database
    try {
    $bdd = new PDO(
    'mysql:host=your host;dbname=your database name', 'your username', 'your password');
    } catch(Exception $e) {
    exit('Unable to connect to database.');
    }
    $sql = "DELETE from evenement WHERE id=".$id;
    $q = $bdd->prepare($sql);
    $q->execute();

    php end tag here

    ReplyDelete
    Replies
    1. Thank you @Geoffrey Peter Turner for sharing the valuable Delete function for jQuery Fullcalendar.

      Delete
  53. hi, when i add a new event the pop up asks for the event title then for the url, it doesnt give me an option for adding the start time or the end time, is there something i have missed?

    ReplyDelete
    Replies
    1. No, by default it only ask fro title and url. Once event is created, you can have start and end date updated from DAY view.

      Delete
  54. I dont know how this happend, but in the above script i had a small error, well I had been working on this delete issue for days and I was posting this after eight hours of figuring it out lol. Anyway this is the html code you should add to your calender page as explained previously.

    eventClick: function(event) {
    var decision = confirm("Do you really want to delete this?");
    if (decision==true) {
    $.ajax({
    url: "your url/delete_events.php",
    data: '&id=' + event.id,
    type: "POST",
    });
    $('#calendar').fullCalendar('removeEvents', event.id);

    } else {
    }
    }

    });



    I know this definately works now, i have just tested it again

    ReplyDelete
  55. Thanks to all for your comments and tips to improve this nice calendar. I've tried everything but I still can't move the events or delete them, any chance for someone with working code to post it?

    Thank you,

    ReplyDelete
    Replies
    1. Neema Nair on December 12, 2013 have posted a rewritten code, which i suppose will work. By the way, the code provided works, at least it worked for me and others as well.

      Can you check your database structure, table names etc.

      Hopefully, you will make it work. :)

      Delete
    2. Thanks for your answer Anup, it actually works, I can add the events, I can view the events, but I have some issues with allDay events no sticking to the allDay events section and I can't modify the events or delete them, so I am still trying to figure this out.

      Delete
    3. I got inspiration from this video, may be this video can help you
      http://jamelbaz.com/tutos/integration-de-fullcalendar-avec-php-mysql

      Delete
    4. I actually downloaded the latest full calendar library and that fixed all of my problems, really appreciate your help.

      Delete
  56. Is this calendar available for full year view ?

    ReplyDelete
  57. Hi, how do I change the event click default from opening the event url in the active window to opening it in a new window or tab, i have found mention of it in arshaws documentation but dont know where to find the function to change it, or do i need to add the function in my script on the php page. any help would be appreciated

    ReplyDelete
  58. Has anyone tried to add categories and colors based on these categories? If yes, I will really appreciate some directions.

    ReplyDelete
  59. how can i assign colors for completed events.....like differentiate between completed events and yet to complete the events...

    ReplyDelete
  60. Everything is working great for me except the all day. It is always inserted into the db as false, assuming since we set the default value to false. I don't see anywhere where you are setting this to true to insert into the db?

    If I create an event on the month agenda, it saves fine, refresh the page and it always shows 12am by it.
    Here is an example of the row in the db start='2014-03-14 00:00:00' and end='0000-00-00 00:00:00' on the week and day agendas these do not show in the All Day sections.

    Anyone have any ideas why this isnt working?

    ReplyDelete
    Replies
    1. I ended up solving this... I did the check on the insert, if start = end insert true for all day. Which ends up inserting 1 for true... Then I did the check on the js file if allDay = 1 then allDay = true etc.

      Delete
  61. When I update the page, all events disappeared. What should I do?

    ReplyDelete
    Replies
    1. $('#calendar').fullCalendar('refetchEvents');

      Delete
  62. Anyone know how to use 12 hour format?

    I am formatting the start and end like this
    select: function(start, end, allDay) {
    var startDate = $.fullCalendar.formatDate(start, "MM-dd-yyyy h:mm:tt");
    var endDate = $.fullCalendar.formatDate(end, "MM-dd-yyyy h:mm:tt");

    Which inserts to the db like this 04-01-2014 12:00:am

    But then the events do not render... they will only render if I format them like this
    select: function(start, end, allDay) {
    var startDate = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
    var endDate = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");

    Which inserts to the db like this 2014-04-01 00:00:00

    ReplyDelete
  63. Hi

    I am able to add an event.
    The event is logged into the database.
    However, when I refresh the page, the event disappears.

    What should I do?

    ReplyDelete
    Replies
    1. What happens when you inspect the page when it should be loading the events? Do you have any console errors? Make sure your events path is correct and your events.php is pulling the results from the correct table etc. Also make sure your timestamps are inserting correctly.

      I ended up making a wordpress plugin and had to tweak a lot of the code. It is a per user calendar I added email notifications and google calendar to it as well so users can add their google calendars.

      If anyone wants to check it out you can view it at http://www.pnw-design.com/product/full-calendar-per-user-events/

      Delete
    2. I get these two errors when it should be loading the events.

      XMLHttpRequest cannot load http://localhost/major_project/calendar/events.php?start=1396137600&end=1399762800&_=1396884235391. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. default.html:1

      event.returnValue is deprecated. Please use the standard event.preventDefault() instead.


      This is how my timestamps show up in the database:
      Start: 2014-04-09 00:00:00.000000
      End: 2014-04-09 00:00:00.000000

      Is this correct?
      What should I do to fix it?

      Thanks

      Delete
    3. Did you change a lot of the code or something, why is it including the headers in the url like that... they should be post values etc. Also I don't think your time stamps look right. I believe they should just be Start: 2014-04-09 00:00:00 but then again I am converting mine to 12 hour clock so they can edit the times when they click on an event. Again I have changed a lot of the code. Can you pastebin your events and ajax files?

      Delete
    4. Also see this as you are running this locally http://stackoverflow.com/questions/20766678/why-i-cannot-load-with-jquery-an-html-under-the-current-html-file-into-a-div

      Delete
    5. When you mentioned that I was running this locally I decided to upload it to a live server and it now works. I dont know what the problem was but its working, so cant argue with that lol.

      What I want to do now is make it so that events will only be displayed for a specific user that is logged in. So multiple users can create their own events.

      How would I go about doing this?

      Delete
    6. You could download my plugin if its for wordpress lol. What are you using for this? If you have created your own backend, then I am sure you could figure this out. Either way... when you create a user event, get the user id of the currently logged in user. Then insert the userid into the event table. Then do the same thing for showing the events, do your querry WHERE userid = $currentUserId etc...

      Delete
    7. Thanks, I created my own backend but I did so by following a tutorial and I am not exactly sure how to do this.
      Would you be able to show me the code that would allow me to do this?

      Do I need to make any adjustments to the table for this calendar or the existing code?

      I really appreciate your help, Thanks.

      Delete
    8. I would need to see your code to be able to help as I have no idea what or how your backend is working with users etc. Doesn't sound like you really do either haha. I can't just hand over some code to you and expect it to work. If you would like my help you can contact me directly and we can work something out.

      Delete
    9. Nice , it's work properly, thank you

      Delete
  64. hey friend please mail me full calendar in which we can add and delete event....
    please as soon as possible
    mail id :- rahar.raj1@gmail.com
    thnxx

    ReplyDelete