CODEWITHSUNDEEP
javascriptmobilefullcalendarfullcalendar-5
letz
letz

Reputation: 1792

Custom button not clickable on full calendar event with mobile devices

I'm using full calendar with a custom event view (its almost the same as the default but I only added a button to delete the event

enter image description here

        eventDidMount: function(eventDidMountInfo) {
          var $deleteBtn = $(eventDidMountInfo.el).find('button')
          if(eventDidMountInfo.event.extendedProps.can_edit_event) {
            $deleteBtn.on( "click", function(argument) {
              deleteTimeSlot(calendar, eventDidMountInfo.event)
            })
          } else {
            $deleteBtn.remove()
          }
        },
        eventContent: function(info) {
          return {
            html: '<div class="fc-event-main-frame"><div class="fc-event-time">' + info.timeText + '<button type="button" class="btn-close float-end m-1" aria-label="Close"></button></div><div class="fc-event-title-container"><div class="fc-event-title fc-sticky">' + info.event.title + '</div></div></div>'
          };

this works well on pc, I manage to delete events without an issue, the issue is on mobile, the event isn't firing.

I'm guessing there is something to do with the full calendar feature long press on mobile?

Upvotes: 1

Views: 747

Answers (1)

Shilly
Shilly

Reputation: 8589

Mobile devices use the Touch Events API, not normal click events.

So we have to use both .on( 'click' ) and .on( 'touchstart' ); to be compatible with both PC and some mobile devices.

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

Upvotes: 1

Related Questions