• Tips

    AngularUI Calendar (FullCalendar) dayClick not work expectedly on iOS

    bowerで入れた angularUI Calendar 1.0.0, FullCalendar 2.1.1での話です。

    Angular WEBアプリでカレンダーを使いたいというニーズを完璧なまでに満たす AngularUI Calendar http://angular-ui.github.io/ui-calendar/

    ですが、月(month)表示から日セルクリックで日(agendaDay)表示に切り替えようとしてdayClickを使用した場合、なぜかiPhoneではうまく動作しません。

    正確にいえば、タップではなく一秒ほど長押しするか、軽く日セルをドラッグしようとするとdayClickが呼ばれます。

    なんでどぅあぁぁぁーーーー！

    と3日ほど頭を悩ませた結果、なんとか対処できたのでおすそ分けします。 ちなみにAngularUI CalendarはFullCalendarのラッパーなので、FullCalendarで同じような問題に悩んでいる方にも効くはず….です。

    原因

    dragイベントの扱いの違いに起因しています。 dayClickはclickイベントで呼ばれていません。dragの終了を検知して呼ばれています。 iOS上のSafari(というかwebkit?)以外では、タップして指を離した瞬間に drag開始、drag終了のイベントが発生するのですが、iOSではdragするか、しばしタップし続けないとdrag終了イベントが発生しないためのようです。

    どうにもならんのでタップイベントでdayClickを呼ぶようFullCalendar.jsを修正しました。

    4038行目付近

        coordMap: null, // a GridCoordMap that converts pixel values to datetimes
    cellDuration: null, // a cell's duration. subclasses must assign this ASAP
    isTouch : false, // separate touch and scroll.

    // Renders the grid into the `el` element.

    4093行目付近

    ...