Touch Support in Beta Releases

Touch device support has been added to FullCalendar Core and the Scheduler, represented by the long-standing issue 994:

  • smooth scrolling
  • press-and-hold dragging and resizing of events
  • press-and-hold time range selection

UPDATE (4/23/16): this has been officially released!

FullCalendar Core 2.7.0-beta

FullCalendar Scheduler 1.3.0-beta

Bug Reports

Please post bug reports to the Core issue tracker. If your issue is specifically related to resources or Timeline view, please use the Scheduler issue tracker instead.

Psst... there are separate pages for feature requests, bug reports, and getting help.
  • Previous version of FullCalendar have external dragging functionality for adding new events (Docs | Demo).

    HOWEVER, external dragging has not been accounted for in these Beta releases. External dragging relies on jQuery UI, which has touch support hacked-in via Touch Punch, which I have neglected to include.

    I’m curious to hear how people plan to implement touch dragging of external events. Touch Punch? Draggabilly? InteractJS? Via an exposed FullCalendar utility?

    • Fabien

      Hi Adam,

      I implemented it with Touch Punch. I upgraded from 2.2.5. Not so bad but a lot of testing 🙂
      To fit my needs, I did 2 “hacks” in your code.

      The first one is about resizing.
      In handleSegTouchStart, it seems that the selection happened only if the object is draggable. I have an object that is resizable but not draggable and it was not working.
      So I re-arranged the condition to this :

      if (!isResizing) {
      if (view.isEventDraggable(event)) {
      this.clearDragListeners();
      dragListener = this.buildSegDragListener(seg);

      dragListener._dragStart = function() { // TODO: better way of binding
      // if not previously selected, will fire after a delay. then, select the event
      if (!isSelected) {
      view.selectEvent(event);
      }
      };

      dragListener.startInteraction(ev, {
      delay: isSelected ? 0 : this.view.opt(‘longPressDelay’) // do delay if not already selected
      });
      } else {
      if (view.isEventResizable(event)) {
      if (!isSelected) {
      setTimeout(function() {
      view.selectEvent(event);
      }, this.view.opt(‘longPressDelay’));
      }
      }
      }
      }

      The second hack I did is related to a change you put in place in version 2.3.

      Before this version, when an external object was drop on the calendar, the offset of the ui parameter in the drop trigger was the offset of the dropping position. From 2.3, the offset is the offset of the starting position. I had to “re-import” (with some adaptations) the code that was in 2.2.5 cause I need to know where exactly the object is drop.

      So in “listenToExternalDrag” I removed the following code from dragListener object :

      dragStop: function() {
      if (dropLocation) { // element was dropped on a valid hit
      _this.view.reportExternalDrop(meta, dropLocation, el, ev, ui);
      }
      },

      and I put the following code after the object creation and before
      “dragListener.startDrag(ev)”

      $(document).one(‘dragstop’, function(ev, ui) {
      if (dropLocation) { // element was dropped on a valid hit
      _this.view.reportExternalDrop(meta, dropLocation, el, ev, ui);
      }
      _this.isDraggingExternal = false;
      _this.externalDragListener = null;
      });

      Thanks for the upgrade. Very appreciated !

      • Hi Fabien. I want to take your comments here and move them to the issue tracker.

        Your first issue:
        Resizable events that aren’t draggable, on touch
        Could you please subscribe to it, and post a JSBin recreation?

        I’m having trouble understanding your second issue. It sounds like it is dependent on jQuery UI behavior (because FC doesn’t manipulate the “ui” parameter at all). It’s unclear to me why your workaround works. Could you create a new discussion on the issue tracker?
        https://github.com/fullcalendar/fullcalendar/issues

    • john2011

      Also check out hammerjs: http://hammerjs.github.io/

      it adds support for all gestures and is around 4.29 kb only.

  • Awesome work man!! I am loving it.

    For the touch dragging of external events, I use “jQuery.UI.iPad” by Stephen von Takach. Check it.

    Also, please check the “selectable” demo. I think is broken. See here: http://fullcalendar.io/js/fullcalendar-2.7.0-beta/demos/selectable.html

    • I just tested the selectable demo on both ipad and android table, and it works for me. Are you doing a long tap first?

      • Okay. Yes. It worked even on my ultra book (it has touchscreen). Thanks.

  • Sidney Miranda

    How can I integrate Full Calendar with MS-SQL Server using PHP?

    • Súper Chinazo

      What do you mean, i´m current build something for Oracle, Mysql and SQLServer… contact me on SKype, Face or Whatss. grettings

  • Akira Sora

    can we use different object to load in full calendar as event ?
    example:
    from the pictures i wanna load
    IDPICA,Tanggal,Problem,Deadline as event feed in full calendar

  • Anthony Michel

    Hi Adam,

    First thanks for your work 🙂

    I juste upgraded to version 2.7.1 and I have an issue on device with both classic controllers (mouse, touchpad, keyboard) and touchscreen. Like the Asus zenbook.

    It seems that the calendar detect the touchscreen capability, which then works fine but disable the use of the mouse click.

    I didn’t find any workaround yet.

  • OneCar Wood

    Wow, I have been looking for a calendar that would fit my needs for some time and I thin I have found it. This is awesome man thanks a bunch I love it!

  • Harshad Patel

    is their any way to increase multiple month for getting dayrender date?
    because i need to do some calculation on that and i need to load at least two months date