Created
October 19, 2011 21:44
-
-
Save jboesch/1299783 to your computer and use it in GitHub Desktop.
Drag/drop for fullCalendar on iPad
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/******************************** | |
* UPDATE: I have crated a plugin to do this: https://github.com/jboesch/jQuery-fullCalendar-iPad-drag-drop/ | |
*********************************/ | |
/*These are the brief steps that it takes to get fullCalendar (http://arshaw.com/fullcalendar/) up and running with drag/drop support on the iPad. This assumes you already have fullCalendar setup.*/ | |
//1. Include a copy of jQuery touch punch in your project, you can find it here: https://github.com/furf/jquery-ui-touch-punch | |
//2. Go into jquery-touch-punch.js and right after this line (around line 57 - mouseProto._mouseDown = function (event) {) add this: this._mouseDownEvent = event; | |
//3. Add this function somewhere in your global.js file or wherever you want: | |
function isTouchDevice() | |
{ | |
var ua = navigator.userAgent; | |
var isTouchDevice = ( | |
ua.match(/iPad/i) || | |
ua.match(/iPhone/i) || | |
ua.match(/iPod/i) || | |
ua.match(/Android/i) | |
); | |
return isTouchDevice; | |
} | |
// 4. Now you'll need to hook into the fullCalendar loading callback (http://arshaw.com/fullcalendar/docs/event_data/loading/): So your code should include the loading key like so: | |
loading: function(isLoading) | |
{ | |
if(!isLoading && isTouchDevice()) | |
{ | |
// Since the draggable events are lazy(bind)loaded, we need to | |
// trigger them all so they're all ready for us to drag/drop | |
// on the iPad. w00t! | |
$('.fc-event-draggable').each(function(){ | |
var e = jQuery.Event("mouseover", { | |
target: this.firstChild, | |
_dummyCalledOnStartup: true | |
}); | |
$(this).trigger(e); | |
}); | |
} | |
} | |
// 5. If you're using the eventClick function build into fullCalendar, you'll want to refactor it to be something like: | |
var options = { minTime: 5, maxTime: 18, loading: ....(code above) }; | |
var method = (isTouchDevice()) ? 'eventMouseover' : 'eventClick'; | |
options[method] = function(event, jsEvent, view) | |
{ | |
if(jsEvent._dummyCalledOnStartup) | |
{ | |
return; | |
} | |
// Do something here when someone clicks on the event. | |
} | |
$('#yourcal').fullCalendar(options); | |
// 6. That's it! Have fun! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is for the old version of fullcalendar before 2.1.x correct?