Labels

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/
Labels:

Comments

  1. exmatuzJuly 18, 2013 at 7:09 PM

    `allDay` varchar(255) ??

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

    ReplyDelete
  2. UnknownAugust 4, 2013 at 2:41 PM

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

    ReplyDelete
  3. UnknownAugust 9, 2013 at 5:29 PM

    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. Guido Q.April 12, 2014 at 4:55 PM

      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
    2. HusniMay 14, 2014 at 6:38 PM

      can you please send me your code to my email husnixs@gmail.com.
      cause I really need it, thanks in advance.

      Delete
    3. Arbaaz DurraniMay 21, 2014 at 2:11 PM

      please send me the source code if you have done this without errors =) please need it urgent

      arbaazdurrani7@gmail.com

      Delete
    4. UnknownFebruary 25, 2015 at 11:47 AM

      could you send it to me too?

      sebseb@yahoo.com

      thanks
      Sebastian

      Delete
    5. Isai CervantesApril 8, 2015 at 8:24 PM

      Yes, send me your source code please. I'll appreciate it a lot. Thank you.

      cervantes.isai@gmail.com

      Delete
  4. BluesyBlueAugust 10, 2013 at 1:47 PM

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

    ReplyDelete
  5. BluesyBlueAugust 10, 2013 at 4:08 PM

    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. UnknownAugust 10, 2013 at 4:56 PM

      Thanks for the fixing the problem, it works.

      Delete
    2. Anup ShakyaAugust 12, 2013 at 8:51 AM

      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. AJFebruary 28, 2014 at 6:56 AM

      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. Anup ShakyaAugust 12, 2013 at 8:56 AM

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

    ReplyDelete
  7. Sombr@September 5, 2013 at 10:06 PM

    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. Anup ShakyaSeptember 17, 2013 at 10:27 AM

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

      Delete
  8. FranciscoSeptember 17, 2013 at 1:32 AM

    Hi, thanks for tutorial, how to eliminate a event?

    ReplyDelete
    Replies
    1. Anup ShakyaSeptember 17, 2013 at 10:25 AM

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

      Hope this helps :)

      Delete
  9. kalpesh patelSeptember 17, 2013 at 11:15 AM

    hi i have error when try to add second event

    TypeError: t.getFullYear is not a function

    ReplyDelete
    Replies
    1. Anup ShakyaSeptember 17, 2013 at 4:24 PM

      //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. UnknownSeptember 19, 2013 at 9:28 AM

    This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Anup ShakyaSeptember 19, 2013 at 10:24 AM

      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. UnknownSeptember 25, 2013 at 10:40 AM

    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. Anup ShakyaSeptember 25, 2013 at 10:45 AM

      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. UnknownSeptember 25, 2013 at 11:05 AM

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

      Delete
  12. UnknownSeptember 27, 2013 at 3:10 AM

    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. UnknownNovember 13, 2013 at 1:56 PM

      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. Anup ShakyaNovember 13, 2013 at 2:33 PM

      Thank you for your input. Greatly appreciated. :)

      Delete
  13. UnknownSeptember 28, 2013 at 6:05 AM

    How come the allDay is not save in the db?

    ReplyDelete
    Replies
    1. Anup ShakyaSeptember 30, 2013 at 9:00 AM

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

      Delete
  14. UnknownSeptember 28, 2013 at 6:25 AM

    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. UnknownOctober 1, 2013 at 5:11 AM

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

    Thanks in advance :)

    ReplyDelete
  16. UnknownOctober 1, 2013 at 5:53 AM

    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. UnknownNovember 13, 2013 at 11:16 PM

      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. UnknownOctober 11, 2013 at 8:15 PM

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

    ReplyDelete
    Replies
    1. Anup ShakyaOctober 14, 2013 at 9:32 AM

      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. hasanislamOctober 15, 2013 at 7:28 AM

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

    ReplyDelete
    Replies
    1. Anup ShakyaOctober 15, 2013 at 8:46 AM

      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. JackOctober 17, 2013 at 4:42 PM

    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. Anup ShakyaOctober 18, 2013 at 3:34 PM

      Have you checked if the database is updated with events?

      Delete
    2. JackOctober 24, 2013 at 12:53 PM

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

      Delete
    3. Anup ShakyaOctober 24, 2013 at 3:34 PM

      Great job Jack.

      Delete
  20. A3RNovember 2, 2013 at 10:01 PM

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

    ReplyDelete
  21. Devita SwadaniNovember 4, 2013 at 4:21 PM

    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. Anup ShakyaNovember 4, 2013 at 4:55 PM

      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. Devita SwadaniNovember 5, 2013 at 3:33 AM

      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. Anup ShakyaNovember 5, 2013 at 9:05 AM

      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. Devita SwadaniNovember 5, 2013 at 12:32 PM

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

      Delete
    5. Anup ShakyaNovember 5, 2013 at 12:56 PM

      Great. :)

      Delete
  22. JeenaNovember 6, 2013 at 3:12 PM

    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. Anup ShakyaNovember 8, 2013 at 11:03 AM

      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. UnknownNovember 8, 2013 at 7:04 AM

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

    ReplyDelete
    Replies
    1. Anup ShakyaNovember 8, 2013 at 10:59 AM

      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. joachimNovember 17, 2013 at 10:45 PM

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

    ReplyDelete
  25. UnknownNovember 22, 2013 at 7:31 PM

    How i can save new entries with selectable.html ?

    i'm connected with the database ..

    ReplyDelete
  26. UnknownNovember 22, 2013 at 7:33 PM

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

    ReplyDelete
  27. UnknownNovember 27, 2013 at 2:29 PM

    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. AnonymousNovember 28, 2013 at 4:58 AM

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

    ReplyDelete
  29. Anup ShakyaNovember 29, 2013 at 9:09 AM

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

    ReplyDelete
  30. AnonymousDecember 4, 2013 at 3:18 AM

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

    ReplyDelete
  31. Blogger CRDecember 5, 2013 at 6:57 PM

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

    ReplyDelete
  32. Blogger CRDecember 5, 2013 at 6:59 PM

    I need to include recurring events?
    please help

    ReplyDelete
    Replies
    1. Anup ShakyaDecember 6, 2013 at 9:35 AM

      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. Anup ShakyaDecember 6, 2013 at 9:37 AM

    You can find documentation of Fullcalendar from the below website,

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

    ReplyDelete
  34. Blogger CRDecember 6, 2013 at 3:21 PM

    there are .zip and where this fact?

    ReplyDelete
  35. CarlosDecember 6, 2013 at 7:20 PM

    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. Anup ShakyaDecember 11, 2013 at 10:29 AM

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

      Delete
  36. UnknownDecember 10, 2013 at 12:51 PM

    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. Anup ShakyaDecember 11, 2013 at 10:28 AM

      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. UnknownDecember 11, 2013 at 5:55 AM

    please do reply

    ReplyDelete
  38. UnknownDecember 12, 2013 at 5:43 AM

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

    ReplyDelete
  39. UnknownDecember 12, 2013 at 9:28 AM

    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
  40. UnknownDecember 16, 2013 at 9:41 AM

    How to edit event name

    ReplyDelete
  41. UnknownDecember 17, 2013 at 7:16 PM

    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. Anup ShakyaDecember 18, 2013 at 8:57 AM

      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
  42. asdfsadfdafwdwfawadfDecember 19, 2013 at 11:28 PM

    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
  43. Beni BeniDecember 25, 2013 at 9:51 AM

    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. Anup ShakyaJanuary 7, 2014 at 9:04 AM

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

      Delete
  44. UnknownJanuary 2, 2014 at 8:30 AM

    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. Anup ShakyaJanuary 7, 2014 at 9:02 AM

      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
  45. AnonymousJanuary 2, 2014 at 9:04 AM

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

    ReplyDelete
  46. UnknownJanuary 6, 2014 at 5:31 PM

    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. Anup ShakyaJanuary 8, 2014 at 3:12 PM

      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
    2. UnknownApril 1, 2014 at 2:13 PM

      amasikhwa@gmail.com

      Delete
    3. UnknownNovember 27, 2014 at 1:50 PM

      isquare.dhaval@gmail.com

      Delete
    4. UnknownNovember 27, 2014 at 1:52 PM

      please send me a .zip also.. i need it. thaanks in advance
      isquare.dhaval@gmail.com

      Delete
  47. UnknownJanuary 7, 2014 at 11:34 PM

    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. Anup ShakyaJanuary 8, 2014 at 1:32 PM

      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
  48. UnknownJanuary 8, 2014 at 2:36 PM

    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. Anup ShakyaJanuary 8, 2014 at 3:06 PM

      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. Anup ShakyaJanuary 9, 2014 at 1:43 PM

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

      Delete
  49. UnknownJanuary 24, 2014 at 1:57 PM

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

    ReplyDelete
  50. debindraJanuary 26, 2014 at 5:23 AM

    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
  51. UnknownJanuary 28, 2014 at 9:49 AM

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

    ReplyDelete
  52. UnknownJanuary 28, 2014 at 12:03 PM

    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. UnknownJanuary 28, 2014 at 12:05 PM

      PS: add this code in the drag & drop function

      Delete
  53. AnonymousFebruary 10, 2014 at 7:03 AM

    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
  54. AnonymousFebruary 10, 2014 at 7:21 AM

    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. Anup ShakyaFebruary 10, 2014 at 9:02 AM

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

      Delete
  55. AnonymousFebruary 10, 2014 at 9:35 AM

    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. Anup ShakyaFebruary 10, 2014 at 2:14 PM

      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
  56. AnonymousFebruary 13, 2014 at 11:15 PM

    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
  57. UnknownFebruary 18, 2014 at 5:03 AM

    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. Anup ShakyaFebruary 18, 2014 at 9:19 AM

      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. UnknownFebruary 18, 2014 at 5:11 PM

      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. Anup ShakyaFebruary 19, 2014 at 9:54 AM

      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. UnknownFebruary 19, 2014 at 6:31 PM

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

      Delete
    5. Anup ShakyaFebruary 20, 2014 at 9:08 AM

      Good job Marco.

      Cheers.

      Delete
  58. UnknownFebruary 21, 2014 at 6:01 AM

    not working

    ReplyDelete
  59. UnknownFebruary 24, 2014 at 12:32 PM

    Is this calendar available for full year view ?

    ReplyDelete
  60. AnonymousFebruary 27, 2014 at 5:40 PM

    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
  61. UnknownFebruary 28, 2014 at 2:11 AM

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

    ReplyDelete
  62. UnknownMarch 27, 2014 at 12:14 PM

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

    ReplyDelete
  63. UnknownMarch 29, 2014 at 12:40 AM

    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. UnknownMarch 31, 2014 at 9:46 PM

      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
  64. EsleyMarch 30, 2014 at 10:19 PM

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

    ReplyDelete
    Replies
    1. UnknownMarch 31, 2014 at 9:45 PM

      $('#calendar').fullCalendar('refetchEvents');

      Delete
  65. UnknownApril 1, 2014 at 4:40 PM

    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
  66. UnknownApril 7, 2014 at 12:02 AM

    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. UnknownApril 7, 2014 at 4:58 PM

      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. UnknownApril 7, 2014 at 5:43 PM

      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. UnknownApril 7, 2014 at 5:52 PM

      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. UnknownApril 7, 2014 at 5:54 PM

      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. UnknownApril 7, 2014 at 6:26 PM

      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. UnknownApril 7, 2014 at 8:56 PM

      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. UnknownApril 8, 2014 at 5:35 PM

      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. UnknownApril 8, 2014 at 6:07 PM

      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. UnknownApril 12, 2014 at 2:01 PM

      Nice , it's work properly, thank you

      Delete
  67. AnonymousApril 13, 2014 at 9:33 PM

    Thanks xD

    ReplyDelete
  68. RajendraApril 16, 2014 at 1:38 PM

    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
  69. UnknownApril 25, 2014 at 5:25 PM

    Anyone have any success getting this to work with an SQLite Database ?

    I was able to insert an event...but not display it on the calendar...also I am having the same issue as some of the other people...where my time stamp reads "2014-04-25 00:00:00"

    Also...could there be a discrepancy between the .js files... the post reads

    jquery-1.9.1.min.js
    jquery-ui-1.10.2.custom.min.js

    but downloading the "fullcalendar-1.6.4.zip" from arshaw.com

    the only availble .js files are :
    jquery.min.js
    jquery-ui.custom.min.js

    If I solve my issues I'll post up the resolution

    ReplyDelete
  70. UnknownApril 26, 2014 at 5:06 PM

    Thanks for the code, it works perfectly !
    Anyone knows how to add recurring events ?

    ReplyDelete
  71. Daniel RieraMay 8, 2014 at 6:45 AM

    Hello, I would like to expand the information that is added to the database, such as a type of service (work related) and could do so through a form that send the same data by post?

    regards

    great post!

    ReplyDelete
  72. Raaj LokanathanMay 10, 2014 at 12:35 PM

    I am having a serious problem here.. The calendar UI is not showing in my default.php file.. i have copy the code accordingly but still no luck.. can anyone help me i will send my jsfidle here http://jsfiddle.net/jLzub/

    ReplyDelete
  73. AnonymousMay 19, 2014 at 2:10 PM

    Hello ,,,,, Use code really help but problem occur with dragable functionality....................any help?

    ReplyDelete
  74. UnknownMay 30, 2014 at 7:50 PM

    Hi. Anyone know how to highlight the title as a tooltip when hovering over an event

    ReplyDelete
  75. UnknownJune 5, 2014 at 4:43 AM

    Adam Bowen just helped me with my problem. Thanks to the OP and Adam! check out http://www.pnw-design.com/product/full-calendar-per-user-events/ by adam its pretty neat.

    ReplyDelete
  76. UnknownJune 10, 2014 at 3:38 AM

    is there a way to only show the event name in the calendar? currently it shows the time but i dont want the time to be show, just the event name

    ReplyDelete
  77. AnonymousJune 11, 2014 at 2:53 PM

    How can i differentiate color for each event? Please hep us

    ReplyDelete
  78. Riyas KhanJune 12, 2014 at 8:53 AM

    please mail the jquery plugins and css to riyasrahuf@yahoo.com

    ReplyDelete
  79. zippaJune 14, 2014 at 4:27 PM

    Hi - Fantastic tutorial. I am trying to get draggable events to save to my database which they do but the start and end dates are not being saved. Here s my code:

    $(document).ready(function() {


    /* initialize the external events
    -----------------------------------------------------------------*/

    $('#external-events div.external-event').each(function() {

    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
    // it doesn't need to have a start or end
    var eventObject = {
    title: $.trim($(this).text()), // use the element's text as the event title
    url: $.trim($(this).attr('url'))
    };

    // store the Event Object in the DOM element so we can get to it later
    $(this).data('eventObject', eventObject);

    // make the event draggable using jQuery UI
    $(this).draggable({
    zIndex: 999,
    revert: true, // will cause the event to go back to its
    revertDuration: 0 // original position after the drag
    });

    });


    /* initialize the calendar
    -----------------------------------------------------------------*/

    $('#calendar').fullCalendar({
    header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
    },
    events: "http://localhost/fullcalendar/events.php",
    eventRender: function(event, element, view) {
    if (event.allDay === 'true') {
    event.allDay = true;
    } else {
    event.allDay = false;
    }
    },
    editable: true,
    droppable: true, // this allows things to be dropped onto the calendar !!!
    drop: function(date, allDay) { // this function is called when something is dropped

    // retrieve the dropped element's stored Event Object
    var originalEventObject = $(this).data('eventObject');

    // we need to copy it, so that multiple events don't have a reference to the same object
    var copiedEventObject = $.extend({}, originalEventObject);

    // assign it the date that was reported
    copiedEventObject.start = date;
    copiedEventObject.allDay = allDay;

    // render the event on the calendar
    // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
    $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

    // is the "remove after drop" checkbox checked?
    //if ($('#drop-remove').is(':checked')) {
    // if so, remove the element from the "Draggable Events" list
    //$(this).remove();
    //}
    if(copiedEventObject.title){
    var title = copiedEventObject.title;
    if (title) {
    var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
    var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
    var url = copiedEventObject.url;
    $.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
    }
    }
    });


    });



    any help would be very much appreciated. Thanks

    ReplyDelete
  80. UnknownJune 25, 2014 at 4:58 AM

    Hello. Where did you establish your database? Can i do it in phpMyAdmin?

    ReplyDelete
  81. UnknownJuly 5, 2014 at 5:47 PM

    hello can you please send me a working fullcalendar in my e mail i cannot fix my calendar. the events are not sticking in the calendar. thanks!..bernalvinm@gmail.com.

    ReplyDelete
  82. HenryRulezJuly 14, 2014 at 9:25 AM

    Thank you so much for this post, that's really awesome!

    ReplyDelete
  83. jeffreyhoJuly 15, 2014 at 12:12 PM

    hi, how can i change the weekly times (0:00-24:00) to only (9:00 - 18:00)?

    ReplyDelete
  84. jeffJuly 31, 2014 at 2:56 AM

    hey where can i download the full calendar plugin?

    ReplyDelete
    Replies
    1. UnknownAugust 1, 2014 at 5:49 AM

      You can download the calendar plugin/source from: http://arshaw.com/fullcalendar/download/

      Delete
  85. UnknownAugust 1, 2014 at 5:50 AM

    Thanks for the write-up, I seem to be having problems when viewing the week and day, the tasks show up for the month view but not for the week and day, I would like it to.

    What might be causing this?

    ReplyDelete
  86. UnknownAugust 11, 2014 at 6:47 PM

    Hi ! it´s a great tutorial!

    when I try to add a event, I´ve get a next error
    TypeError: $.fullCalendar.formatDate is not a function

    I think that is here
    var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
    var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");

    Please I need help to fix it asap!!!!!!!

    Thanks!

    ReplyDelete
    Replies
    1. Anup ShakyaAugust 12, 2014 at 9:08 AM

      Check http://arshaw.com/fullcalendar/ for complete list of functions and type errors. It has complete document regarding jQuery fullcalendar.

      Delete
  87. AnonymousAugust 19, 2014 at 11:49 AM

    thanks a lot.........



    PHP Training in Chennai

    ReplyDelete
  88. UnknownAugust 27, 2014 at 4:33 AM

    thanks for the totorial but for mine not working both the line
    var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");alert(start);
    var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
    any idea plizzzz...

    ReplyDelete
    Replies
    1. TavinsonNovember 5, 2014 at 10:35 PM

      You might be using the V2 version of FullCalendar, which means that instead of

      var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");

      you have to use

      var end = $.fullCalendar.moment(end).format();

      In this page you can look at the changes made in the FullCalendar upgrade

      http://fullcalendar.io/wiki/Upgrading-to-v2/

      Delete
    2. UnknownNovember 29, 2014 at 11:13 PM

      For the $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss"); you need to change it to:

      var start=moment(start).format('YYYY/MM/DD/HH');
      var end=moment(end).format('YYYY/MM/DD/HH');


      at least this worked for me

      Delete
  89. UnknownAugust 27, 2014 at 9:07 AM

    how do I use "eventLimit"

    ReplyDelete
    Replies
    1. Anup ShakyaAugust 27, 2014 at 9:44 AM

      What do you mean by 'eventLimit' ?

      Delete
    2. UnknownAugust 27, 2014 at 10:55 AM

      eventLimit : When there are too many events, a link that looks like "+2 more" is displayed. http://arshaw.com/fullcalendar/docs/display/eventLimit/

      Delete
  90. depachecoAugust 27, 2014 at 7:47 PM

    Gracias Anup Shakya por haber dedicado tiempo y esfuerzo en la realización de este plugin.
    Lo necesitaba para POSTGRESQL.

    ReplyDelete
  91. UnknownOctober 16, 2014 at 12:46 PM

    Hey,

    Followed your tutorial to the letter, but still have my events displaying in the allDay slot even when they are set as false in the DB.

    Any ideas?

    Regards,

    James

    ReplyDelete
  92. sachinOctober 29, 2014 at 8:03 AM

    Hey,
    I just want to display only 3 events on particular calendar date.
    please suggest me if any idea?

    Thanks

    ReplyDelete
  93. UnknownNovember 19, 2014 at 1:46 PM

    When we add an event, to decrease damage with allDay's problem, I make a function, she's not perfect, but if an event having its start hour and its end hour to 00:00, I defined allDay at true

    function isAllDay(start,end){
    var startH = $.fullCalendar.moment(start).format('HH:mm');
    var endH = $.fullCalendar.moment(end).format('HH:mm');
    if(startH == "00:00" && endH == "00:00"){
    return true;
    }else{
    return false;
    }
    }
    I use a < form > displayed in a colorbox, so I test the hours to check or not a checkbox. If an user create an event from 00:00 to "24:00", I think that I can put this event in allDay's place.

    ReplyDelete
  94. UnknownNovember 30, 2014 at 7:24 PM

    i have found the solutution for the allday problem,

    I just deleted the allday collum in the Database. When i did this all my events where set from allday to the certain time they where added like 2014-11-12 12:15:00 - 2014-11-12 15:15:00


    hope this helped out some of your problems

    ReplyDelete
  95. UnknownDecember 9, 2014 at 10:51 AM

    Can i have the complete fullcalendar function without error heres my email hyunjae5546@gmail.com thank you. :D

    ReplyDelete
  96. UnknownDecember 25, 2014 at 5:13 AM

    I've set this up on my server and it doesn't seem to work. I can add events in the database, but when I click on the calendar, I cannot add, move, or delete events. If I try, it doesn't show up with any error messages but it doesn't affect the database or the calendar. help!

    ReplyDelete
  97. UnknownJanuary 5, 2015 at 7:26 AM

    hi I integrate this code in my site but i got error $.fullCalendar.formatDate is not a function pls help to me how i clear this error

    ReplyDelete
  98. UnknownJanuary 7, 2015 at 12:08 AM

    Hi, I have created this calendar in my website so what I want to do next is to display the events in the textbox next to my calendar for which the member has signed up for particular events they will be going to. Therefore, I would like to know how to retrieve those events from the calendar that the member has signed up for to the textbox using PHP coding. Could you give me some ideas/help me how can I do this.

    ReplyDelete
  99. UnknownFebruary 11, 2015 at 1:50 PM

    Hi all

    I've used the code at the top and it was working fine until I decided to use the url field to store a variable and NOT an url. Now of course when I edit or delete an entry I get redirected to the url, which is what I don't want.
    I've added the following code to the eventDrop function and that works well:

    eventClick: function(event) {
    if(event.url){
    return false;
    }
    }

    How can I add the same code to the delete and edit functions to prevent the url field to be used for redirections?

    Any help greatly appreciated!

    ReplyDelete
  100. UnknownFebruary 25, 2015 at 10:31 AM

    plz email me working code.

    jazibbashir@gmail.com

    ReplyDelete
  101. pollmixMarch 3, 2015 at 2:48 PM

    Please send me the code and db file.

    polboy777@gmail.com

    Thanks in advance.

    ReplyDelete
  102. UnknownMarch 3, 2015 at 5:28 PM

    Hye, im currently at lost on the add event part. I followed all the necessary steps but i cant seems to add event properly into the database(title,start,end,url)... for example, if i clicked on the day i would only be able to insert to value which are the title and the url. Once those input values inserted, nothing happend...the database is not updated..it doesnt seems to work...help pls

    ReplyDelete
    Replies
    1. UnknownMarch 3, 2015 at 6:49 PM

      Hi Harith

      it sounds like your database table is not set up correctly. Check your columns. 'Start' and 'End' should be 'datetime', the others should be 'varchar'.

      Does anything get inserted? Can you post some code here, so we can help you?

      Delete
    2. UnknownMarch 4, 2015 at 7:01 AM

      Thx for the fast reply george, i will try to redo everything else again just to make sure, and yes, i have set up the database correctly

      i will post the my code later.

      Delete
    3. UnknownMarch 4, 2015 at 9:36 AM

      before anything else i just want to clear things out regarding the script issues. On the steps provided above, the scripts seems to be different than what are provided by the newest fullcalendar files. For example the default html above are using these scripts
      'js/jquery-1.9.1.min.js'
      'js/jquery-ui-1.10.2.custom.min.js'
      'js/fullcalendar.min.js'

      where as the latest fullcalendar default html are using these script (you noticed there is that moment.min.js)

      '../lib/moment.min.js'
      '../lib/jquery.min.js'
      '../fullcalendar.min.js'

      apart from the path issues, do i need to download extra jquery scripts and put it inside the default html?

      Delete
    4. UnknownMarch 4, 2015 at 11:07 AM

      Hi Harith

      I have the following on my working site:

      jquery/jquery.min.2.1.1.js
      jquery/moment.min.js
      jquery/fullcalendar.min.js
      jquery/jquery-ui-1.8.2.custom.min.js


      The 'moment.min.js' is no longer used by my script (I think!), so I could have left it out. I found that the date/time issue using moment.min.js did not work for me. I used another approach which I will share with you once i've seen that your script actually posts something to the database.

      Delete
    5. UnknownMarch 4, 2015 at 12:13 PM

      Hi George

      if it is possible to sent my code through email? i would hope you could look into it here, it seems i cant post all of the code over here so i would need to sent it through email.

      Hoping for a fast reply of your email. Looking forward for you to look into it(i wished i could have fix it my self)

      Delete
    6. UnknownMarch 4, 2015 at 1:09 PM

      Not sure how we can do this. Don't want to share my email address with the whole world!

      Delete
    7. UnknownMarch 4, 2015 at 1:22 PM

      Hi George,

      Nvm that, i just need to know wether i'm on the right track, after i have inserted the input data for event title and url, it should have prompt the alert box successful message right? it seems nothing happend on my case.. the data are not inserted into the database and no error pop out..

      i did setup my database correctly in this case(database name = fullcalendar, table name = evenement)

      I will try to look into it again~
      Thanks anyway

      Delete
    8. UnknownMarch 4, 2015 at 1:43 PM

      If you have used the code at the VERY beginning of this tutorial, then you should get an 'Added successfully' box.

      If you don't get that box, then something is wrong with your inserting.

      Modify the code below, so that you can see what's going wrong:

      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');
      }

      to:

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

      var dataString = 'title='+ title+'&start='+ start +'&end='+ end +'&url='+ url; // added

      alert(dataString); // added

      $.ajax({
      url: 'http://localhost:8888/fullcalendar/add_events.php',
      data: dataString, // changed
      type: "POST",
      success: function(json) {
      alert('Added Successfully');
      }

      This will now pop up an alert box with the data that's supposed to be added. Check for errors.


      Delete
  103. UnknownMarch 4, 2015 at 5:43 PM

    the above code does not save the value of events in database pls help me to do so.

    ReplyDelete
  104. i3lai3la-March 5, 2015 at 8:01 AM

    If you are using jQuery fullcalender version 2 and above, "formatDate" is no longer supported.Please RTFM here ->http://fullcalendar.io/docs/

    replace

    var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
    var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");

    with

    var start = $.fullCalendar.moment(start).format();
    var end = $.fullCalendar.moment(end).format();

    ReplyDelete
  105. UnknownMarch 5, 2015 at 8:11 AM

    Hi 13lai3la

    It works! Thanks alot for pointing out the problem regarding the older and the newest version of the fullcalendar.
    No wonder there is an additional moment.js script inside the new version. I should have look into the documentation the moment i encountered this problem(i'm such a bad programmer).

    Anyway thanks alot for pointing out those~

    ReplyDelete
  106. UnknownMarch 6, 2015 at 9:45 AM

    Where should I put these .php files?

    ReplyDelete
  107. UnknownMarch 13, 2015 at 6:27 AM

    i have a full calander set up. In this calander.. i drag and drop accounts so as to schedule events thereby making them saved in the respective object.

    I want to disable all datetimes in the full calander before current date time so as to disable the selectability on and off that full calander blocks.



    pleas help

    ReplyDelete
  108. UnknownMarch 30, 2015 at 9:23 AM

    Hello, I set up a fullcalendar connected to an sql database and it works fine on computer but I can not use it on my mobile, the resize function doesn't work and when I insert a new event it is always an event of an half an hour not more. Is it normal?

    Please help

    ReplyDelete
  109. .April 9, 2015 at 3:05 AM

    Hi. i got this errors, can anyone help me please? thanks

    ReferenceError: moment is not defined fullcalendar.min.js:6:121

    La codificación de caracteres del documento HTML no ha sido declarada. El documento se mostrará con texto "basura" en algunas configuraciones de navegador si el documento contiene caracteres externos al rango US-ASCII. La codificación de caracteres de la página debe ser declarada en el documento o en el protocolo de transferencia. default.html

    TypeError: $(...).fullcalendar is not a function

    ReplyDelete
    Replies
    1. Isai CervantesApril 9, 2015 at 8:46 AM

      Same here. The Calendar doesn't even appears.

      Delete
    2. Anup ShakyaApril 9, 2015 at 9:39 AM

      If you are using jQuery fullcalender version 2 and above, "formatDate" is no longer supported.Please RTFM here ->http://fullcalendar.io/docs/

      replace

      var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
      var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");

      with

      var start = $.fullCalendar.moment(start).format();
      var end = $.fullCalendar.moment(end).format();

      Delete
    3. Isai CervantesApril 9, 2015 at 9:10 PM

      It still doesn't work. I

      Delete
  110. UnknownApril 10, 2015 at 7:26 AM

    hey anup,
    i have changed format date in my code but when i am trying to update any event its not updating the time and date i am selecting on the calendar instead it takes my pc's current date and time and update it in the database and also moves the event to todays date.

    ReplyDelete

Post a Comment

Popular Posts