3

in my Full Calendar I don't want to support Selection with drag. Only Events should create in one Slot. In normal Browsers it works well (I just add to the selection X minutes). The problem I have, is that on Mobile you need to long tap and drag to fire my Add Event function.

Is there any way I can switch from long tap to single tap? The User should just tap to the slot, to add a event!

Example single tap

Example long tap

In "Month View" I want to change the view to Day. So I write this function:

   dayClick: function (date, jsEvent, view) {
                $('#calendar').fullCalendar('gotoDate', date);
                $('#calendar').fullCalendar('changeView', 'agendaDay');
            }

But on Mobile it don't work, because on single Tap nothing happened and on long tap it fire up my "Add Event" Function

Ckappo
  • 607
  • 1
  • 9
  • 27
  • Check this [thread](http://stackoverflow.com/questions/10826623/how-to-make-fullcalendar-work-on-touch-devices) and the [jQuery UI Touch Punch library](http://touchpunch.furf.com) – Gjermund Dahl May 01 '16 at 18:39
  • i tried with jQuery UI Touch Punch, but it don't work. – Ckappo May 01 '16 at 18:45
  • With Full Calendar 2.X Touch support is included. But it just use long tap. I want to single tap to a slot to add events – Ckappo May 01 '16 at 18:52

1 Answers1

1

This seems to work fine with an earlier version of fullcalendar, 2.2.6. Confirmed with Win desktop Firefox and iPhone Safari.

However, in version 2.7.0 this does not work.

$(document).ready(function() {
  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,basicWeek,basicDay'
    },
    dayClick: function(date, jsEvent, view) {
      $('#calendar').fullCalendar('gotoDate', date);
      $('#calendar').fullCalendar('changeView', 'agendaDay');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.js"></script>


<div id="calendar"></div>
Gjermund Dahl
  • 1,410
  • 17
  • 25
  • Ok with 2.2.6 Full Calendar it works with single tap. But now in Month View a dayClick start my dayClick function and select function. – Ckappo May 02 '16 at 06:41
  • Added: selectable: {month: false,agenda: true} and it work well! – Ckappo May 02 '16 at 07:21
  • The single Tap work great but provide a new Problem. On Mobile Phones i can't scroll in my Calendar anymore! :-) Any tip? – Ckappo May 02 '16 at 09:09
  • I am not able to recreate that behaviour based on the code above. I have used this fiddle: https://jsfiddle.net/EliteSystemer/dhejsjdg/ Please check if it conforms with your code. – Gjermund Dahl May 02 '16 at 09:29
  • Its similar to my code and I use the same js files. I don't use if (view.name != "agendaDay") in DayClick because i block selectable Views (selectable: {month: false,agenda: true}) My Problem is the scroll behaviour when i click into my Calendar – Ckappo May 02 '16 at 09:41
  • ok the scroll was disabled by jQuery One Touch JS. With Full Calendar 2.7.1 I was able to create Events on a single tap, when I set longPressDelay to 100ms. Is there any function to select event on double press? – Ckappo May 02 '16 at 10:52
  • You can bind a doubleclick function to elements: http://stackoverflow.com/questions/8124460/handle-dblclick-in-fullcalendar-jquery-plugin – Gjermund Dahl May 02 '16 at 13:07