Skip to content

Instantly share code, notes, and snippets.

@jboesch
Created October 19, 2011 21:44
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save jboesch/1299783 to your computer and use it in GitHub Desktop.
Save jboesch/1299783 to your computer and use it in GitHub Desktop.
Drag/drop for fullCalendar on iPad
/********************************
* 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!
@WhatFreshHellIsThis
Copy link

This is for the old version of fullcalendar before 2.1.x correct?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment