Wednesday, June 26, 2013

jQuery fullcalendar integration with PHP and MySQL

This plugin is to create a comprehensive interactive calendar that looks like "Google Calendar". And to perform basic operations on events (display, add, edit) dynamically through AJAX requests, it also allows to easily manipulate the various elements via "drag & drop".

fig: Screen dump of output

Step1 : Download the jQuery fullcalendar plugin by here
You need to grab the required scripts and css. You can find what you need to make it work by looking at default.html file.
The plugin comes with a demo files to test the calendar: the name of the folder is "Demos". Do not hesitate to explore all the files and take a look at the source code of each page to understand the differences.

Step 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

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: falseBut 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 ?

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.

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.

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

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.

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?

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^^

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? :(

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 database2) 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.

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.

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.

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(); }//********************************************//

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.

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.

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

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.

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.

But then the events do not render... they will only render if I format them like thisselect: 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");

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/

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?

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...

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.

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/

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

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

thanks for the totorial but for mine not working both the linevar 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...

Thanks for your ideas. You can also find the details on Affity Solutions, at the php developers. The main object of the Affity Solutions is to provide quality web services and is among the few software development company in Nagpur.

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.

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!

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.

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?

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

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?

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.

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)

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).

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?