How to make FullCalendar work on touch devices?

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();
        }

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!


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();
});

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