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/

Comments

  1. `allDay` varchar(255) ??

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

    ReplyDelete
  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
    2. can you please send me your code to my email husnixs@gmail.com.
      cause I really need it, thanks in advance.

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

      arbaazdurrani7@gmail.com

      Delete
    4. could you send it to me too?

      sebseb@yahoo.com

      thanks
      Sebastian

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

      cervantes.isai@gmail.com

      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
    2. please send me a .zip also.. i need it. thaanks in advance
      isquare.dhaval@gmail.com

      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
  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
  65. 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
  66. Thanks for the code, it works perfectly !
    Anyone knows how to add recurring events ?

    ReplyDelete
  67. 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
  68. 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
  69. Hello ,,,,, Use code really help but problem occur with dragable functionality....................any help?

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

    ReplyDelete
  71. 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
  72. 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
  73. How can i differentiate color for each event? Please hep us

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

    ReplyDelete
  75. 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
  76. Hello. Where did you establish your database? Can i do it in phpMyAdmin?

    ReplyDelete
  77. 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
  78. Thank you so much for this post, that's really awesome!

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

    ReplyDelete
  80. hey where can i download the full calendar plugin?

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

      Delete
  81. 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
  82. 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. Check http://arshaw.com/fullcalendar/ for complete list of functions and type errors. It has complete document regarding jQuery fullcalendar.

      Delete
  83. 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. 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. 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
  84. Replies
    1. What do you mean by 'eventLimit' ?

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

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

    ReplyDelete
  86. 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
  87. Hey,
    I just want to display only 3 events on particular calendar date.
    please suggest me if any idea?

    Thanks

    ReplyDelete
  88. 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
  89. 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
  90. Can i have the complete fullcalendar function without error heres my email hyunjae5546@gmail.com thank you. :D

    ReplyDelete
  91. 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
  92. 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
  93. 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
  94. 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
  95. plz email me working code.

    jazibbashir@gmail.com

    ReplyDelete
  96. Please send me the code and db file.

    polboy777@gmail.com

    Thanks in advance.

    ReplyDelete
  97. 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. 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. 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. 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. 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. 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. Not sure how we can do this. Don't want to share my email address with the whole world!

      Delete
    7. 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. 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
  98. the above code does not save the value of events in database pls help me to do so.

    ReplyDelete
  99. 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
  100. 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
  101. Where should I put these .php files?

    ReplyDelete
  102. 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
  103. 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
  104. 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. Same here. The Calendar doesn't even appears.

      Delete
    2. 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
  105. 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