fullcalendar select callback not firing in mobile

Question

I am using fullcalendar version 2.9.1. I am rendering calendar as agendaWeek. When I click on specific time slot from desktop, it's firing the select callback, but when I click on the mobile device it's not. What is the problem?

     selectable:true,
     select: function(start, end, jsEvent, view) {
      // event is firing this callback
     }

I am using this in angular application using ui.calendar

score 6 · Accepted Answer · answered Nov 18 '16 at 08:51

6

I think you need to tap and hold in order to select dates/slots in mobile devices... https://fullcalendar.io/docs/event_ui/longPressDelay/

answered Nov 18 '16 at 08:51

eddiriarte

86
3

score 6 · Answer 2 · answered Jun 05 '21 at 09:22

It seems that you need to set the click time.

longPressDelay: 1

example

$('#calendar').fullCalendar
  height: 'auto'
  nowIndicator: true
  defaultView: gon.default_view
  header: ''
  selectable: true
  selectHelper: true
  longPressDelay: 1
  selectConstraint:
    start: '00:00'
    end: '24:00'
...

score 1 · Answer 3 · answered Oct 10 '22 at 17:51

In case someone is looking for the same in React and stumbles in this post, like it happened to me, you can do it like the code bellow be using the longPressDelay={1} property.

  <FullCalendar
        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin]}
        headerToolbar={{
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,listWeek', // timeGridWeek,timeGridDay
        }}
        initialView="dayGridMonth"
        editable
        selectable
        selectMirror
        dayMaxEvents
        weekends
        initialEvents={testEvents}
        select={handleDateSelect}
        eventClick={handleEventClick}
        themeSystem="bootstrap5"
        longPressDelay={1} // This is the property you need to change
      />

fullcalendar select callback not firing in mobile

3 Answers3

Linked