17

I was looking for a tablet friendly event calendar, but I did not find any suitable ones. But FullCalendar is one best jQuery calendar plugin that looks great on desktop and a tablet.

This calendar works perfectly on a desktop, but when it comes to tablet I am unable to select the start time and end time of an event, based on the touch and swipe. When i do this the calendar gets scrolled. Is there any solution for this? I have been looking around for a solution in vein.

Have anyone had this issue and did you solve it? Please share the method how you solved it. Any sort of help is appreciated.

Thanks in advance.

Dipin Krishnan
  • 1,260
  • 3
  • 21
  • 41

8 Answers8

15

Have you tried including the Jquery UI Touch Punch?

By default, Jquery UI doesn't support Touch Events because it wasn't optimized for mobile devices. Touch Punch solved my problems with the Jquery UI Drag&Drop functionalities, which seem to be used by FullCalendar as well.

Hope it helps!

gwythen
  • 168
  • 1
  • 5
  • 1
    I have seen this solution [here](http://code.google.com/p/fullcalendar/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Type%20Status%20Milestone%20Summary%20Stars&groupby=&sort=&id=724). And dragging the event around worked fine for me but, I could not select the time slot based on the touch an drag on the week view/day view to create an event. How did you solve this issue? Could you please help me out? – Dipin Krishnan May 31 '12 at 17:20
  • 1
    @John Definitely give a try with jQuery Touch Punch. – Dipin Krishnan May 27 '13 at 04:52
  • jQuery UI Touch Punch 0.2.2 doesn't allow drag on touch devices, at least with fullcalendar 1.6.4 on Android 4 stock browser... – MarcoS Oct 24 '13 at 07:12
9

THIS WORKS

I used this plugin: jquery.ui.touch.js

adds Touch support to Fullcalendar for iOS and Android devices

just use this to initialize your calendar:

eventRender: function(event, element) {
            $(element).addTouch();
        }
Gotschi
  • 3,175
  • 2
  • 24
  • 22
  • Works better than jQuery Touch Punch, as with @yndolok solution you can drop events around and these don't automatically correct their position to fit within the margins of their parent container. – Seether Mar 17 '15 at 15:57
  • Make sure to use the latest jQueryUI or it won't work. At this moment I'm using 1.11.4. The newest fullcalendar uses the latest jQuery 2.x. – Mistergreen Jun 02 '15 at 14:50
  • Worked for me too. – Dan Torrey Apr 14 '16 at 13:26
2

Since I struggled to get this to work with jQuery UI touch punch, and I couldn't find any complete example code, I thought I'd post the code I used to make creating and dragging events work on mobile devices:

NOTE: This example uses jQuery UI touch punch.

$(document).ready(function() {

  $('#calendar').fullCalendar({
    ...
    eventAfterRender: function(event, element, view) {
      element.draggable();
    }
  });

  $('.fc-view tbody').draggable();
});
yndolok
  • 5,197
  • 2
  • 42
  • 46
2

FullCalendar touch support is available in the beta release for v2.7.0 according to this FullCalendar blog post.

akivajgordon
  • 8,761
  • 1
  • 19
  • 27
2

With latest Full Calendar 2.7.1, touch is Supported. You can even set Options for Press delays. Just look at the Docs

Ckappo
  • 607
  • 1
  • 9
  • 27
2

For those who have trouble selecting a day on a mobile device this question is very helpful, using prop longPressDelay as 10 it works!

See more in FullCalendar / Docs Touch Support

stringnome
  • 233
  • 1
  • 7
  • 15
1

I used this plugin: jquery.ui.touch.js

It worked for me by this code:

$('#calendar').fullCalendar({
[...]
});

$('#calendar').addTouch();
Pasdo
  • 11
  • 1
0

It works for me

<FullCalendar
    ...
    selectLongPressDelay={1}
    ...
/>
Dinesh Srinivasan
  • 41
  • 3