Fullcalendar: Better support on iPad and mobile devices

[arshaw]

Originally reported on Google Code with ID 724

I am tying to test the full calendar loaded webpage on iPad and the drag n drop , click
functions do not work. I am aware that the jquery side of things is being modified
to be supported on these devices and there are some versions available for iPad, iPhone
etc.

can we please support full calendar on those devices as well,

Reported by rbarara on 2010-11-21 14:17:56

Imported with 52 stars.

[arshaw]

Reported by adamrshaw on 2010-11-22 03:23:53

• Status changed: Maybe

[arshaw]

Imho you should wait for the jQuery mobile project. It looks very promising:

http://jquerymobile.com/

Reported by althaus.it on 2010-11-22 09:18:27

[arshaw]

jquery mobile has an alpha release out. Can we upgrade the priority of this request
?

Reported by rbarara on 2010-12-23 17:36:32

[arshaw]

Also, the scrolling of the weekly view with two fingers doesn't work. It would be nice
if this double finger scrolling is supported.

Reported by rlaemmler on 2011-01-19 09:44:09

[arshaw]

If you gift me an iPad, I can help you on this. ;-)

Reported by althaus.it on 2011-01-19 09:46:08

[arshaw]

At the moment, in the weekly view I cannot scroll the calendar up and down. Not even
using 2-finger scrolling. Are there plans for supporting this?

Reported by rlaemmler on 2011-04-26 12:27:26

[arshaw]

Issue 1200 has been merged into this issue.

Reported by althaus.it on 2011-04-28 08:36:37

[arshaw]

Being able to scroll in agendaWeek and agendaDay on a tablet like an ipad would be a
much appreciated update.

Reported by [email protected] on 2011-04-30 11:43:30

[arshaw]

Just on scrolling, I found that you can use two fingers to drag and that will perform
a scroll.  Apparently it's in the safari/iPad doco, who would have thunk it.

Reported by malkouna on 2011-05-05 02:11:31

[arshaw]

Today we managed fc to do real smooth one-finger scrolling by using some other jquery-plugins.
I could help you with the implementation, if you got no ipad yet ;) Beeing able to
drag events on mobile devices would be really cool! 

Reported by florian.wilk on 2011-08-30 19:29:40

[arshaw]

i just managed to make drag-and-drop working in fullcalendar on ipad.

use this plugin http://code.google.com/p/jquery-ui-for-ipad-and-iphone/

and add this in fullcalendar.js for ipad only.

before dragableDayEvent()
$.fn.addTouch = function() {
    if ($.support.touch) {
        var obj = document.getElementsByClassName('#calendar');
        for(i=0; i<obj.length;i++){
            obj[i].addEventListener("touchstart", iPadTouchHandler, false);
            obj[i].addEventListener("touchmove", iPadTouchHandler, false);
            obj[i].addEventListener("touchend", iPadTouchHandler, false);
            obj[i].addEventListener("touchcancel", iPadTouchHandler, false);
        }
    }
};

and inside the dragableDayEvent() before the eventElement.draggable() add this eventElement.addTouch();

Hope this helps cause took me 4 hours to find a solution, maybe will be implemented
in a much better way in a release or something

Reported by raduta.alex on 2011-09-16 10:21:11

[arshaw]

I agree. We need iPad support. We know you're busy Adam and we appreciate the time you've
put towards this.

Reported by [email protected] on 2011-10-18 21:53:26

[arshaw]

I got events dragging/dropping on iPad. Also working with eventClick. Here is how to
do it.
https://gist.github.com/1299783

Reported by [email protected] on 2011-10-19 21:47:20

[arshaw]

Scratch the comment above. I started an official plugin for iPad drag/drop support.
https://github.com/jboesch/jQuery-fullCalendar-iPad-drag-drop

Reported by jboesch26 on 2011-10-20 01:34:07

[arshaw]

@jboesch26: That looks really nice and if you can encapsulate all code in a plugin,
it'd be an awesome addition to FC. :)

Reported by althaus.it on 2011-10-20 08:23:06

• Status changed: MaybePlugin

[arshaw]

Is there any plan to include Android platform support in the plugin?

Reported by vitorbari on 2011-11-04 20:40:24

[arshaw]

Thanks for all the great work on this plugin. 

I was not able to get the jquery-ui-touch-punch plugin or the plugin @jboesch26 created
to work for my project but I did manage to get event dragging and dropping working
using a modified version of the this plugin: http://code.google.com/p/jquery-ui-for-ipad-and-iphone/

I 'forked' the project on GitHub and pushed up the modified version. It is working
successfully for me on iOS (iPad 2) and Android 2.2 using jQuery 1.6.4, jQuery UI 1.8.16
and fullcalendar 1.5.2.

You can grab the code here:
https://github.com/joshgerdes/jquery.ui.touch

Then I just added the following to my main script:

// Setup touch dragging for external events
$('.ui-draggable').addTouch();

// Setup the calendar
$('#calendar').fullCalendar({

...

     eventAfterRender: function( event, element, view ) { 
    // Add touch dragging to event element 
    element.addTouch();
     }

...

I think it would be pretty nice if this touch plugin could and those additional calls
could be incorporated into the fullcalendar plugin.

Cheers!

Reported by joshgerdes on 2012-01-20 17:42:39

[arshaw]

Adding the events to the calender is fine. But, I am unable to select the start time
and end time in iPad. When i click and drag to select its scrolling the view. Any solution
for that?

Reported by dips.kids4u on 2012-05-30 14:34:16

[arshaw]

Reported by adamrshaw on 2013-08-14 02:10:49

• Status changed: Accepted
• Labels added: Type-Feature
• Labels removed: Type-Enhancement

[arshaw]

Issue 2088 has been merged into this issue.

Reported by adamrshaw on 2013-08-15 16:44:45

[arshaw]

Issue 1690 has been merged into this issue.

Reported by adamrshaw on 2013-08-15 17:05:40

[arshaw]

Issue 1903 has been merged into this issue.

Reported by adamrshaw on 2013-08-15 17:27:14

[arshaw]

Issue 1650 has been merged into this issue.

Reported by adamrshaw on 2013-08-16 05:12:03

[arshaw]

Issue 1726 has been merged into this issue.

Reported by adamrshaw on 2013-08-18 19:35:39

[arshaw]

Issue 1830 has been merged into this issue.

Reported by adamrshaw on 2013-08-19 02:01:40

[arshaw]

Issue 1842 has been merged into this issue.

Reported by adamrshaw on 2013-08-19 02:09:55

[arshaw]

Issue 1925 has been merged into this issue.

Reported by adamrshaw on 2013-08-22 06:11:09

[arshaw]

Issue 2070 has been merged into this issue.

Reported by adamrshaw on 2013-08-24 23:48:38

[arshaw]

Issue 2203 has been merged into this issue.

Reported by adamrshaw on 2013-08-25 07:29:54

[arshaw]

swiping left/right to navigate would be nice

Reported by adamrshaw on 2013-08-25 07:30:23

[arshaw]

Issue 1944 has been merged into this issue.

Reported by adamrshaw on 2013-08-25 07:40:55

[arshaw]

Issue 1969 has been merged into this issue.

Reported by adamrshaw on 2013-08-25 08:08:49

[arshaw]

maybe adjust titleFormat to be more condensed on smaller screens (issue 1969)

Reported by adamrshaw on 2013-08-25 08:09:30

[arshaw]

finally what is the verdict, I checked the latest version on iPad & there date range
selection is not happening..

Reported by surajnaikin on 2013-09-07 05:40:24

---

• _Attachment: 2013-09-07_10h40_07.png
  _

[arshaw]

Issue 1990 has been merged into this issue.

Reported by adamrshaw on 2013-09-14 06:08:53

[arshaw]

Here is a PR that implements a more responsive header area:
https://github.com/arshaw/fullcalendar/pull/157

Reported by adamrshaw on 2014-06-05 20:05:06

[arshaw]

Any movement on merging PR #157?

Reported by samgaus on 2014-08-18 13:22:09

[arshaw]

@samgaus, that PR is only for the header area, which I have actually merged into 2.1.0-beta

Note from @SyBr on the blog:

It's very nice to see this project so alive and sound! It's awesome. Congrats for that!
Having that said, I'm afraid that with the jQuery UI dependency it may have gone away
the jQuery UI Touch Punch hack which I think, managed well to give FC the capability
of being usable on touch based devices. Could you point me in the right direction to
have this working on this new version? THANK YOU! :)

Reported by adamrshaw on 2014-08-20 18:19:19

[arshaw]

Issue 2278 has been merged into this issue.

Reported by adamrshaw on 2014-09-05 19:40:25

[arshaw]

Please consider updating the documentation on the website to indicate that FC does not
work in very significant ways with any modern device that doesn't have a mouse.

And in future please consider developing and testing mobile first if you forsee any
future relevancy for this project at all.

Reported by gzmailadmin on 2014-09-17 20:31:24

[arshaw]

Ouch!

Reported by samgaus on 2014-09-17 21:16:16

[arshaw]

Issue 2342 has been merged into this issue.

Reported by adamrshaw on 2014-11-15 21:29:15

[arshaw]

Issue 2373 has been merged into this issue.

Reported by adamrshaw on 2014-11-25 23:28:44

[arshaw]

I'm looking for a workaround for touchpunch for version 2.2.x. Is there anything out
yet or what are the future plans in this project regarding to touch events on mobile?

Reported by djgarms on 2014-12-18 09:20:12

[arshaw]

added touch fixes here:

https://github.com/arshaw/fullcalendar/pull/213

Reported by mmarcucio on 2015-01-06 18:30:28

[arshaw]

Issue 2420 has been merged into this issue.

Reported by adamrshaw on 2015-02-10 02:34:13

[guiporto]

+1

[martin-langhoff]

Is this in short term plans?

[martin-langhoff]

... and are there concrete ways in which it can be... propelled forward? Development done with some hints/support from you? Bounty? Funding?

[arshaw]

just to be clear, what is the most important aspect of making FC work on touch devices. is it the event dragging and dropping?

[BudgieInWA]

I suspect that for each user the answer is "the features that I use". Each user that wants to support touch and use a feature that has no touch alternative is stuck implementing their own alternative control or not using FC.

Features that are impossible to use on touch that I can think of:

• drag and drop event editing,
• selecting more than one cell and,
• hover related events (but I don't think they should be supported).

FC providing a functioning touch alternative to these out-of-the-box would be a great first step, no matter how clunky they are.

[martin-langhoff]

Agreed it'll be around "features I use" but the common cases seem clear to me, in order:

• d&d event edit
• selecting multiple cells (for event creation(?))

There are some tweaks that are documented as working with touchpunch -- see #213 -- bringing those in might be enough (if possible, not sure how it goes with jQuery entanglement).

[LorenGr]

From what I am understanding touchpunch only converts mousevents to touchevents, it actually says clearly in the touchpunch site that the implimentation is a hack. Ideally fullcalendar would listen to touch events along with mouse events and dispatch them respectively. I am eagerly waiting for touch support on fullcalenda :) are you considering doing this in a future update?

[arshaw]

I'll prioritize drag-n-drop first

[dtelaroli]

+1

[husky-koglhof]

+1

[shellydehaven]

Supporting the swipe gesture on touch device would be very helpful - i.e. swipe the week view to move to previous/next week.

[drago1]

Also "taphold" would be good to have i.e. to highlight events with the same title.

[leonardobazico]

+1

[b202i]

Drag and drop events from time slot to another, from one day to another.

On Fri, Mar 4, 2016 at 5:36 PM, Leonardo Bazico [email protected]
wrote:

+1

—
Reply to this email directly or view it on GitHub
https://github.com/fullcalendar/fullcalendar/issues/994#issuecomment-192503589
.

• Matt Kraus *
  Nuvolect LLC
  matt.[email protected]
  [phone]
  www.nuvolect.com

[cmtarazona]

Any update on the mobile support to be added Q1 per the blog? I'm most interested in the resizing on mobile devices. Thanks.

[arshaw]

this has been release in beta. blog post: http://fullcalendar.io/blog/2016/03/touch-support/

[martin-langhoff]

Grand! Very timely for me, so looking into being an early consumer of this release.

Early tests on a variety of devices (iOS, Android, running recent OS+Browser) it all looks very good on your published demo. Reading your git changes to wrap my head around what you are doing.

My work, it seems, will entail...

• check that it all works with the angular wrapper, angular-ui-calendar
• implement drag-drop external events onto the calendar -- migrate from a very simple jquery-make-me-draggable trick to something more sophisticated, with delay etc so as to avoid interfering with drag-to-scroll.

[martin-langhoff]

Works flawlessly with the preexisting angular-ui-calendar, added TouchPunch in its most vanilla setup and things Just Work.

I had to fiddle with it a bit; I had an old jquery-ui.calendar-custom.min.js; removing it (and using the vanilla upstream jquery-ui.min.js) seems to be working well.

[martin-langhoff]

Seems to work out of the box, no conflict with angular-ui-calendar, draft-and-drop works with TouchPunch and the old poxy jquery-make-me-draggable.

I had some grief, removing query-ui.calendar-custom.min.js (old?) fixed it.

[arshaw]

hmm, not sure what jquery-ui.calendar-custom.min.js is. must be something in angular-ui-calendar

[arshaw]

this has been officially released!
https://github.com/fullcalendar/fullcalendar/releases/tag/v2.7.0
https://github.com/fullcalendar/fullcalendar-scheduler/releases/tag/v1.3.0

Docs: http://fullcalendar.io/docs/event_ui/Touch_Support/

Please post bugs/feature requests as separate tickets. Thanks