詳細検索

AngularUI Calendar (FullCalendar) dayClick não funciona como esperado no iOS

Avatar
por furuyamah
3 min de leitura

AngularUI Calendar (FullCalendar) dayClick não funciona como esperado no iOS
Traduzido do 日本語 • Ver original

Esta é uma história do angularUI Calendar 1.0.0 e FullCalendar 2.1.1 que coloquei no bower.

O AngularUI Calendar http://angular-ui.github.io/ui-calendar/ atende perfeitamente à sua necessidade de calendários nos aplicativos Angular WEB.

No entanto, se você usar dayClick para alternar entre a exibição do mês e a exibição agendaDay com cliques de celular diários, por algum motivo não funciona bem no iPhone.

Para ser preciso, se você tentar pressionar e segurar por um segundo em vez de tocar, ou arrastar levemente a célula solar, o DayClick será chamado.

Por quê!

Depois de pensar nisso por cerca de 3 dias, consegui lidar com isso, então vou compartilhar. Aliás, o AngularUI Calendar é um wrapper para o FullCalendar, então deve funcionar para quem está sofrendo de problemas semelhantes com o FullCalendar.... é.

Causas

Isso se deve à diferença no tratamento dos eventos de arrastar. DayClick não é chamado pelo evento de clique. Ele é chamado detectando o fim do arrasto. Safari no iOS (ou melhor, no webkit?) Caso contrário, o evento arrastar start e arrastar end ocorre no momento em que você toca e solta o dedo, mas no iOS, parece que o evento de arrastar no final não acontece a menos que você arraste ou continue tocando por um tempo.

Corrigi a FullCalendar.js de chamar o dayClick no evento de toque.

Perto da linha 4038

    coordMap: null, // um GridCoordMap que converte os valores dos pixels em datas
    célulaDuração: nula, // duração de uma célula. subclasses devem atribuir isso o quanto antes
    isTouch: false, // toque e rolagem separados. 

    Renderiza a grade no elemento 'el'. 

Perto da linha 4093

        this.el.on('mousedown', function(ev) { 
            se ( 
                !$(ev.target).is('.fc-event-container *, .fc-more') & & // não é um elemento de evento, nem um link "mais.."
                !$(ev.target).closest('.fc-popover').length // não em um popover (como o de "mais.." eventos)
            ) { 
                _this.dayMousedown(ev); 
            }
        }); 

        this.el.on('touchstart', function (ev) { 
            this.isTouch = true; 
        }); 

        this.el.on('touchmove', função (ev) { 
            this.isTouch = false; 
        }); 

        this.el.on('touchend', função (ev) { 
                if (this.isTouch == false) { 
                    pode ser scroll. 
                    retorno; 
                }
                se ( 
                    !$(ev.target).is('.fc-event-container *, .fc-more') & & // não é um elemento de evento, nem um link "mais.."
                    !$(ev.target).closest('.fc-popover').length // não em um popover (como o de "mais.." eventos)
                ) { 
                    _this.toqueFim(ev); 
                }
            }
        ); 

        this.bindSegHandlers(); anexar handlers relacionados a elementos de evento. em Grid.events.js
    }, 

    touchEnd: function(ev){ 
        console.log("toque final chamado."); 
        var _this = isto; 
        var view = this.view; 

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

    Processe um mousedown em um elemento que represente um dia. Para clicar e selecionar um dia. 
    dayMousedown: function(ev) { 

Se você simplesmente pega o touchend, o comportamento pode ser estranho quando você é arrastado, então eu também pego touchstart e touchmove para identificar arrastar e tocar.

Espero que você ache útil!

Mudou fullcalendar.js fullcalendar.js

Related Articles