angular-ui / ui-calendar

A complete AngularJS directive for the Arshaw FullCalendar.
http://angular-ui.github.io/ui-calendar/
MIT License
1.49k stars 727 forks source link

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

Open Pauldic opened 10 years ago

Pauldic commented 10 years ago

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 commented 9 years ago

+1

AljosaH commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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

AljosaH commented 9 years ago

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 commented 9 years ago

Oh! Thanks Man! I will tried out

AljosaH commented 9 years ago

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

joshkurz commented 9 years ago

Nice work @AljosaH. could you open a PR on the fullcalendar repo and link back here. On Nov 28, 2014 8:00 AM, "AljosaH" notifications@github.com 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 commented 9 years ago

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 commented 9 years ago

@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 commented 9 years ago

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

Regards, Wendy

osaral commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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

harishanchu commented 9 years ago

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 commented 8 years ago

+1

leonardobazico commented 8 years ago

+1

manj1790 commented 8 years ago

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

pratikdhaboo commented 8 years ago

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

waleedasif322 commented 8 years ago

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

lync0056 commented 8 years ago

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 commented 8 years ago

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

bhavna23 commented 7 years ago

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..