How to fix Uncaught TypeError: Cannot call method 'call' of undefined in fullcalendar

Question

im developing an apps using phonegap and need to use fullcalendar 'selectable' functionalities. the apps works fine in phone. but when installed to tablet, tapping on any of the calendar will shows this error:

07-25 16:12:37.676: I/chromium(4707): [INFO:CONSOLE(128)] "Uncaught TypeError: Cannot call method 'call' of undefined", source: file:///android_asset/www/apis/fullcalendar/core/main.js (128)

Why it only happens on tablet but on my phone it is working fine

these are the scripts that i've imported in my html:

<link href='apis/fullcalendar/core/main.css' rel='stylesheet' />
<link href='apis/fullcalendar/daygrid/main.css' rel='stylesheet' />
<script src='apis/fullcalendar/core/main.js'></script>
<script src='apis/fullcalendar/interaction/main.js'></script>
<script src='apis/fullcalendar/daygrid/main.js'></script>

and this is how i create my calendar

    var today = moment().format('YYYY[-]MM[-]DD');
    var eventList = new Array();

    $.each(
        holidayDateList,
        function(i,v) {
            var events = {
                title: holidayNameList[i],
                start: v,
                backgroundColor: "#8c8c8c"
            };

            eventList.push(events);
        });

    $.each(
        offdayServerDateList,
        function(i,v) {
            var events = {
                title: offdayServerReasonList[i],
                start: v
            };

            eventList.push(events);
        });

    $.each(
        offdayDateList,
        function(i,v) {
            var events = {
                title: offdayReasonList[i],
                start: v
            };

            eventList.push(events);
        });

    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'interaction', 'dayGrid' ],
        defaultDate: today,
        editable: false,
        selectable: true,
        selectMirror: true,
        select: function(arg) {
            var isToday = moment(arg.start).format('YYYY[-]MM[-]DD') == today;
            var isAfterToday = moment(arg.start).isAfter(today);
            var isHolidayDate = holidayDateList.indexOf(moment(arg.start).format('YYYY[-]MM[-]DD')) >= 0;
            var isOffdayDate = offdayServerDateList.indexOf(moment(arg.start).format('YYYY[-]MM[-]DD')) >= 0;

            if((isAfterToday || isToday) && !isHolidayDate && !isOffdayDate) {
                $("#dialog-form").dialog("open");
            }
        },
        eventLimit: true,
        eventClick: function(info) {
            var isOffdayDate = offdayServerDateList.indexOf(moment(info.event.start).format('YYYY[-]MM[-]DD')) >= 0;

            if(isOffdayDate) {
                alert("Open delete reason dialog for " + moment(info.event.start).format('YYYY[-]MM[-]DD'));
            } else {
                alert(info.event.title);
            }
        },
        events: eventList
    });

    calendar.render();

UPDATE: i use samsung j5 pro (android oreo) for my phone testing device which the device that can works without any problem. the device that have problem is my samsung galaxy tab 3(android kitkat). also tried to install the apps on nox player set as phone and table. but cannot work either

Answer 1

Seems like when i run the code on my tab. The js doesn't recognize any of the matches method provided in Core/main.js

I need to add webkitMatchesSelector during the matches method selection on line 107 so the code use that matches method instead if others are undefined.

Original:

var matchesMethod = Element.prototype.matches ||
Element.prototype.matchesSelector ||
Element.prototype.msMatchesSelector;

Updated:

var matchesMethod = Element.prototype.matches ||
Element.prototype.matchesSelector ||
Element.prototype.msMatchesSelector || 
Element.prototype.webkitMatchesSelector; // add this

reference: https://github.com/matsko/ng4-animations-preview/issues/1