Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better support on iPad and mobile devices #994

Closed
arshaw opened this issue Aug 19, 2015 · 67 comments

Comments

Projects
None yet
@arshaw
Copy link
Member

commented Aug 19, 2015

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

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

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

  • Status changed: Maybe

@arshaw arshaw self-assigned this Aug 19, 2015

@arshaw

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

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

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

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

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

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

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

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

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

@arshaw

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

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

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

Issue 1200 has been merged into this issue.

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

@arshaw

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

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

Reported by d.lindsay@rogers.com on 2011-04-30 11:43:30

@arshaw

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

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

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

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

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

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

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

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

Reported by jordan@24hrassistant.com on 2011-10-18 21:53:26

@arshaw

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

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

Reported by jordan@24hrassistant.com on 2011-10-19 21:47:20

@arshaw

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

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

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

@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

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

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

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

@arshaw

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

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

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

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

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

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

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

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

Issue 2088 has been merged into this issue.

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

@arshaw

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

Issue 1690 has been merged into this issue.

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

@arshaw

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

Issue 1903 has been merged into this issue.

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

@arshaw

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

Issue 1650 has been merged into this issue.

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

@arshaw

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

Issue 1726 has been merged into this issue.

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

@arshaw

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

Issue 1830 has been merged into this issue.

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

@arshaw

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

Issue 1842 has been merged into this issue.

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

@arshaw

This comment has been minimized.

Copy link
Member Author

commented Aug 19, 2015

Issue 1925 has been merged into this issue.

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

@guiporto

This comment has been minimized.

Copy link

commented Aug 21, 2015

+1

@martin-langhoff

This comment has been minimized.

Copy link

commented Oct 27, 2015

Is this in short term plans?

@martin-langhoff

This comment has been minimized.

Copy link

commented Oct 27, 2015

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

@arshaw

This comment has been minimized.

Copy link
Member Author

commented Oct 29, 2015

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

This comment has been minimized.

Copy link

commented Oct 29, 2015

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

This comment has been minimized.

Copy link

commented Oct 29, 2015

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

This comment has been minimized.

Copy link

commented Oct 29, 2015

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

This comment has been minimized.

Copy link
Member Author

commented Nov 3, 2015

I'll prioritize drag-n-drop first

@dtelaroli

This comment has been minimized.

Copy link

commented Dec 4, 2015

+1

@husky-koglhof

This comment has been minimized.

Copy link

commented Dec 14, 2015

+1

@shellydehaven

This comment has been minimized.

Copy link

commented Jan 14, 2016

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

@drago1

This comment has been minimized.

Copy link

commented Feb 24, 2016

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

@leonardobazico

This comment has been minimized.

Copy link

commented Mar 4, 2016

+1

@b202i

This comment has been minimized.

Copy link

commented Mar 5, 2016

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 notifications@github.com
wrote:

+1


Reply to this email directly or view it on GitHub
#994 (comment)
.

@cmtarazona

This comment has been minimized.

Copy link

commented Mar 22, 2016

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 comment has been minimized.

Copy link
Member Author

commented Mar 26, 2016

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

@martin-langhoff

This comment has been minimized.

Copy link

commented Apr 3, 2016

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

This comment has been minimized.

Copy link

commented Apr 3, 2016

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

This comment has been minimized.

Copy link

commented Apr 4, 2016

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

This comment has been minimized.

Copy link
Member Author

commented Apr 14, 2016

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

@arshaw

This comment has been minimized.

Copy link
Member Author

commented Apr 24, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.