8

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.

user2143356
  • 5,467
  • 19
  • 51
  • 95
  • The way the calendar renders the "events" is very dynamic. The internal engine rerenders the events so it seems like you should try binding the touch event using `live` in jquery. Possibly the library you are using does not do this. This is a pain not just for touch but for other stuff I had to deal with. Did you ever fix this though? Calendar 2 is out now but I am not sure how much of these issues it fixes. – Piotr Kula Feb 05 '14 at 23:00
  • 1
    No, never fixed it and gave up. Sorry, not the best answer to give you. Not looked at Calendar 2, but might give it a try. – user2143356 Feb 07 '14 at 15:15
  • apuschak seems to have found a solution with another library. – Piotr Kula Feb 07 '14 at 16:42

2 Answers2

8

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.

apuschak
  • 216
  • 1
  • 2
  • 8
  • 1
    Touch Punch is the way to go. I added in the Touch Punch source, then added the addTouch to the cell in the dayRender of FullCalendar: `dayRender: function( date, cell) { cell.addTouch(); },` That at least lets you select a day or days on the iPad. I haven't worked on it in a long time and haven't developed any further yet. – apuschak Feb 07 '14 at 16:40
  • 1
    Ohh Fantastic! I will take a look at that. You may want to add that to your answer and I am sure the OP will mark it as answered... even after all this time :) – Piotr Kula Feb 07 '14 at 16:41
  • 2
    This is the way guys! Good Job and Thank you. I added in eventRender element.draggable(); and it works! :) – Give IT Sep 03 '15 at 12:40
  • Getting error after using cell.addTouch function. "Uncaught TypeError: Cannot read property 'addTouch' of undefined" I am using Full calendar version 4. – Kamlesh Nov 01 '19 at 12:38
1

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

Paul Wolbers
  • 31
  • 3