CODEWITHSUNDEEP
jqueryfullcalendar
user2143356
user2143356

Reputation: 5597

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

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:

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.

Upvotes: 8

Views: 12308

Answers (2)

Paul Wolbers
Paul Wolbers

Reputation: 29

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

Upvotes: 1

apuschak
apuschak

Reputation: 216

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.

Upvotes: 8

Related Questions