이 이야기는 angularUI Calendar 1.0.0과 FullCalendar 2.1.1에서 Bower에 넣은 것입니다.
AngularUI 캘린더 http://angular-ui.github.io/ui-calendar/ Angular WEB 앱에서 캘린더에 대한 요구를 완벽하게 충족시켜 줍니다.
하지만 dayClick을 사용해 월 표시와 day를 셀 클릭으로 전환하면, 아이폰에서는 이상하게도 잘 작동하지 않습니다.
정확히 말하면, 탭 대신 누르고 1초 정도 누르거나 태양 셀을 살짝 끌면 dayClick이 호출됩니다.
왜!
약 3일 정도 고민하다가 결국 해결했으니 공유하겠습니다. 참고로, AngularUI 캘린더는 FullCalendar의 래퍼라서 FullCalendar에서 비슷한 문제를 겪는 분들에게도 잘 작동할 거예요.... is.
원인
이는 드래그 이벤트 처리 방식의 차이 때문입니다. dayClick은 클릭 이벤트에 의해 호출되는 것이 아닙니다. 드래그가 끝났을 때 호출됩니다. iOS의 Safari(정확히는 웹킷?) 그렇지 않으면 드래그 시작과 드래그 종료 이벤트가 손가락을 탭하고 놓는 순간에 발생하지만, iOS에서는 드래그하거나 계속 탭하지 않으면 드래그 종료 이벤트가 발생하지 않는 것 같습니다.
탭 이벤트에서 dayClick을 호출하는 FullCalendar.js을 수정했습니다.
4038번 라인 근처에서
coordMap: null, // 픽셀 값을 날짜 시간으로 변환하는 GridCoordMap
cellDuration: null, // 셀의 지속 시간. 서브클래스는 이를 최대한 빨리 할당해야 합니다
isTouch : false, // 터치와 스크롤을 분리하세요.
그리드를 '엘' 요소로 렌더링합니다.
4093번 라인 근처에서
this.el.on('mousedown', function(ev) {
만약 (
!$(ev.target).is('.fc-event-container *, .fc-more') & // 이벤트가 아니거나 "more.." 링크가 아닙니다
!$(ev.target).closest('.fc-popover').length // 팝오버에는 포함되지 않습니다(예를 들어 'more.." 이벤트)
) {
_this.dayMousedown(ev);
}
});
this.el.on('touchstart', 함수 (ev) {
this.isTouch = 참;
});
this.el.on('touchmove', 함수 (ev) {
this.isTouch = false;
});
this.el.on('touchend', 함수 (ev) {
만약 (this.isTouch == false) {
스크롤일 수도 있습니다.
복귀;
}
만약 (
!$(ev.target).is('.fc-event-container *, .fc-more') & // 이벤트가 아니거나 "more.." 링크가 아닙니다
!$(ev.target).closest('.fc-popover').length // 팝오버에는 포함되지 않습니다(예를 들어 'more.." 이벤트)
) {
_this.touchEnd(ev);
}
}
);
this.bindSegHandlers(); 이벤트 요소 관련 핸들러를 부착합니다. Grid.events.js에서
},
touchEnd: function(ev){
console.log("터치 엔드 호출됨.");
var _this = 이것;
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);
},
하루를 나타내는 요소에서 마우스다운을 처리하세요. 하루를 클릭하고 선택하는 경우.
dayMousedown: function(ev) {
단순히 touchend를 잡으면 끌릴 때 이상한 동작이 나올 수 있어서, Touchstart와 touchmove를 잡아 드래그와 탭을 식별합니다.
도움이 되길 바랍니다!
fullcalendar.js fullcalendar.js 변경됨