jQuery FullCalendar working on touch devices - but minor issue with events

Question

http://page-test.co.uk/cal/ - FullCalendar demo

I have set this up which is a basic jQuery FullCalendar setup with the relevant extras to allow support on touch devices.

The included files in the linked page are all default ones.

The demo works perfectly on non-touch devices, but touch devices struggle.

Testing on an iPhone/iPad mainly (other touch devices do more or less exactly the same) once one item is dragged, another one can't be. So you can drag any item, but then the others are sort of locked.

Some key points:

• Changing view (month/week etc.) then allows everything to be dragged again

• If you tap/touch another element first, that then can be dragged, but not others until you touch those first.

• On a BlackBerry Playbook it actually acts slightly differently. If you go to drag a different element (normally nothing at all would happen) then on the PlayBook it appears to do nothing (as you swipe your finger across the screen) - but when you let go (nothing still has happened yet) on letting go it selects the draggable element and then unselects it. If you then go to drag that element it works fine.

• Changing the orientation of the device instantly locks all elements on the page and either changing the view to month/week or touching an element once must be performed before anything can be dragged again.

I bet this is a one line fix, but I've spent hours and just can't get it to do anything.

I just want it working on iPad/iPhone.

It seems to be either that the mouseup/touchend isn't triggering something, or that the touchstart event gets removed after the first drag, but I just can't fins the problem.

Answer 1

Edit:

I used Touch Punch and dayRender to allow selecting a day or multiple days on a touch device. I just added the source and added the addTouch() function from Touch Punch to the rendering of the day cell:

dayRender: function( date, cell) {

cell.addTouch();

},

This at least lets you select a day or days on a touch device, you may be able to use the other Touch Punch functions elsewhere to do more but I haven't tried it.

---

I am experiencing the same issue with an iPad. I tried https://github.com/jboesch/jQuery-fullCalendar-iPad-drag-drop as well with my fullcalendar application and can drag the one event but can't drag another, it scrolls. I disabled scrolling, but still get the same behavior. I also tried the last option mentioned here https://code.google.com/p/fullcalendar/issues/detail?id=724&q=ipad&colspec=ID%20Type%20Status%20Milestone%20Summary%20Stars with this project https://github.com/joshgerdes/jquery.ui.touch

I also want to make a selection of days or hours to create an event. I took a look at google's calendar on the iPad, it is also missing this functionality and they have a notification to use the mobile version if its not working on your browser (safari on the iPad). The mobile version does not display any events in the month view so this won't work as an option for my application. A fully functioning fullcalendar with selectability and drag drop would be ideal, but touch devices might not support this well. I'll keep looking for a solution as well, but if google doesn't offer the functionality, it might not be easy to implement and we might need to offer a mobile version and/or live without selectability and drag and drop on touch screens. I'd greatly appreciate anyone else's help as well.

Answer 2

Use touch punch for dragging events, add code in eventRender:

$.support.touch = 'ontouchend' in document;

if ($.support.touch) {  
     $(element).draggable();
}

for adding touch capabilities to daycells use another touch js file: https://github.com/joshgerdes/jquery.ui.touch and add cell.addTouch() in dayRender

In a few days i will also have in my calendars (based on Fullcalendar)

http://codecanyon.net/user/wolberspl/portfolio?ref=wolberspl