Fullcalendar not propergating touch events on ionic Project while access from mobile

[Pauldic]

I tried using fullcalendar in my ionic project everything looks okay but events like dayClick, eventClick dont get propergated while accessed from mobile but from desktop the alert within the event handler function pops up

[drastick]

+1

[AljosaH]

I'm having the same problem in my ionic project. Out of 5 mobile devices I was able to catch "dayClick" events on just 1. It always works from desktop. Any ideas?

[AljosaH]

Just found out the dayClick event works if I disable scrolling for the page content. See: https://github.com/angular-ui/ui-calendar/issues/96 Would love to have a proper solution though as disabling scrolling is not an option for me.

[AljosaH]

My final solution was to hack fullcalendar.js. I had to force the dayClick event to trigger on event "click" and not "mousedown" as originally. I lost dragging functionality on calendar but I wasn't using it anyway.

[Pauldic]

AljosaH can share your hacked solution. I think I will like to go by it

[AljosaH]

Ok, here it goes:

All change are made in: $.extend(Grid.prototype, {... (around line 4000)

change bindHandlers to:

    bindHandlers: function() {
        var _this = this;

        /*this.el.on('mousedown', function(ev) {
            if (
                !$(ev.target).is('.fc-event-container *, .fc-more') && // not an an event element, or "more.." link
                !$(ev.target).closest('.fc-popover').length // not on a popover (like the "more.." events one)
            ) {
                _this.dayMousedown(ev);
            }
        });*/

        this.el.on('click', function(ev) {
            // CUSTOM!!!!!!!!!!!
            _this.dayMouseClick(ev);
        });

        this.bindSegHandlers(); // attach event-element-related handlers. in Grid.events.js
    },

Now after handler dayMousedown add handler dayMouseClick:

    dayMouseClick: function(ev) {
        // CUSTOM!!!!!!!!!!!
        var _this = this;
        var view = this.view;
        var start; // the inclusive start of the selection
        var dayEl;

        this.coordMap.build();
        var cell = this.coordMap.getCell(ev.pageX, ev.pageY);
        dayEl = _this.getCellDayEl(cell);
        start = _this.getCellDate(cell);
        view.trigger('dayClick', dayEl[0], start, ev);
    },

That's it. It works for me.

[Pauldic]

Oh! Thanks Man! I will tried out

[AljosaH]

I probably should have noted, that I'm using FullCalendar v2.1.1.

[joshkurz]

Nice work @AljosaH. could you open a PR on the fullcalendar repo and link back here. On Nov 28, 2014 8:00 AM, "AljosaH" [email protected] wrote:

I probably should have noted, that I'm using FullCalendar v2.1.1.

— Reply to this email directly or view it on GitHub https://github.com/angular-ui/ui-calendar/issues/143#issuecomment-64891471 .

[axacheng]

Thank you Aljosah!

I got same issue and used the workaround that AljosaH offered to fix it. Below is my fullcalendar bower.conf

{ "name": "fullcalendar", "version": "2.2.3", "description": "Full-sized drag & drop event calendar", "keywords": [ "calendar", "event", "full-sized" ], "homepage": "http://arshaw.com/fullcalendar/", "dependencies": { "jquery": ">=1.7.1", "moment": ">=2.5.0" }, "devDependencies": { "jquery-ui": ">=1.11.1", "jquery-simulate-ext": "~1.3.0", "jquery-mockjax": "~1.5.4", "jasmine-jquery": "~2.0.3", "jasmine-fixture": "~1.2.0", "moment-timezone": "~0.2.1", "bootstrap": "~3.2.0" }, "main": [ "dist/fullcalendar.js", "dist/fullcalendar.css"

[nespapu]

@AljosaH Many thanks for the patch! it works very well with my cordova app using fullcalendar v2.3.0 with onsen framework, Thanks again :)

[wendykurniyanto]

Hi All Is there simple example applying FullCalendar in ionic Framework?

Regards, Wendy

[osaral]

Hi, I have similar issue in "version": "1.6.7". dayClick: function(date, jsEvent, view) is not working when i test mobile device. What is the root of problem?

[tacho888]

Thanks @AljosaH, your solution worked for me. I just had to alter the dayMouseClick() function a little bit because in v2.3 seems that getCellDate() function doesn't exists. So the changes are simple:

     dayMouseClick: function(ev) {
        // CUSTOM!!!!!!!!!!!
        var _this = this;
        var view = this.view;
        var start; // the inclusive start of the selection
        var dayEl;

        this.coordMap.build();
        var cell = this.coordMap.getCell(ev.pageX, ev.pageY);
        dayEl = _this.getCellDayEl(cell);
        if(dayEl){
            start = moment(dayEl[0].getAttribute('data-date'));
        }
        view.trigger('dayClick', dayEl[0], start, ev);
    },

[YiniYin]

Have you tried -- data-tap-disabled="true"

[harishanchu]

I didn't want to go so deep tuning this library, so I did a weird hack and now touch works. I lost drag functionality but that is okay.

        el.on('click', function(ev) {//modified 'mousedown' event to 'click'
            if (
                !$(ev.target).is('.fc-event-container *, .fc-more') && // not an an event element, or "more.." link
                !$(ev.target).closest('.fc-popover').length // not on a popover (like the "more.." events one)
            ) {
                _this.dayMousedown(ev);
                $(document).trigger('mouseup'); // manually triggered 'mouseup' event.
            }
        });

[dtelaroli]

+1

[leonardobazico]

+1

[manj1790]

use this for touch devices http://fullcalendar.io/blog/2016/03/touch-support/

[pratikdhaboo]

When we bundle the app for cordova, dayClick still does not work even with the latest fullcalendar / scheduler.

[waleedasif322]

I think this issue can be closed since new releases now support touch events, as @manj1790 has mentioned.

[lync0056]

Using the Ionic Framework and the new FullCalendar V2.7 - It appears eventClick is working on native but not dayClick. Anybody else experiencing and have any solution? Thanks

[pratikdhaboo]

Yes, I can confirm dayclick not working on native (with cordova) on iOS.

[bhavna23]

I need exactly same IOS calendar features for my webpage app in angular js i.e I need to show all 12 month for current year on single page and then when I select particular month that month should display with events..