Jquery FullCalendar Hacks

I was working on a calendar app (Duh!) using Jquery FullCalendar, encountered some problems and this is how I fixed them.

Problem 1: Resize, Drag & Drop stopped working

Problem 2: Unique events when dragging and resizing

Problem 3: Same as problem 2, but for external drop events

 

---

Problem 1: Resize and Drag & Drop stopped working

I updated to jquery 1.7.x and everything went crazy. Solution is simple. Just update to version 1.5.3. It's not available for download (yet ..) from the website, but you can build it from source by cloning the github repo.

How to build them is out of the scope of this blogpost, but you'll need java and some *unix tools (I think).

 

Problem 2: Unique events when dragging and resizing

 No overlapping events, only one event per day. Sounds simple, but not so straightforward. Several google searches and some inspiration from stackoverflow, here's my solution:

 First, you'll need these functions.

https://gist.github.com/1768213.js?file=scripts

Then, the event handlers.

https://gist.github.com/1768213.js?file=events

Take note that the trick here is to use clientEvents from the stop handlers, and comparing the date values from the main handlers. If you want to know why I did it this way, the short answer is clientEvents gets updated at the wrong time, and at the wrong place.

 

Problem 3: Same as problem 2, but for external drop events

This is a little more straight forward. First, copy the below function.

https://gist.github.com/1767975.js?file=script

Then, implement the drop listener like this.

https://gist.github.com/1767975.js?file=drop

 

Done for the day.