Полный календарь обратного вызова на мобильных устройствах - PullRequest
0 голосов
/ 02 декабря 2018

Я хочу добавить fullcalendar в мой проект.В целом почти все работает как положено.Но сейчас я сталкиваюсь с проблемой, которая появляется только на мобильных устройствах.Когда я щелкаю по какой-либо строке в дневном представлении, должен срабатывать dayClick и выбирать обратные вызовы.И на рабочем столе они делают.Но на Android Chrome ничего не происходит, пока я не поменяю день, месяц или тип просмотра (со дня на месяц).Так что все эти обратные вызовы запускаются при рендеринге нового представления.

Я попытался отладить.И на рабочем столе после того, как я щелкну по временному интервалу, вызывается DragListener.prototype.endInteraction с типом события mouseup.На мобильном телефоне эта функция вызывается только когда я переключаю вид.Похоже, сенсорное событие распознается как перетаскивание или прокрутка.Только «щелчок» за пределами временных интервалов - например, кнопка «следующий день» распознается как сенсорное событие.

Трудно повторить эту проблему на jsfiddle.Потому что даже пример с сайта fullcalendar работает как положено.Но, может быть, это известная проблема или у кого-то была похожая проблема?

Конфигурация:

$(document).ready(function() {
            $('#calendar').fullCalendar({
                views: {
                    month: {
                        selectable: false
                    }
                },
                height: 450,
                eventLimit: 4,
                locale: 'pl',
                viewRender: self.viewRender,
                defaultView: 'agendaDay',
                longPressDelay: 1,
                selectLongPressDelay: 1,
                selectable: true,
                header:{
                    left: 'title',
                    center: '',
                    right: 'today prev,next'
                },
                dayClick: function(date, jsEvent, view, resourceObj) {
                    console.log(view.name);
                    if (view.name === "month") {
                        $('#calendar').fullCalendar('gotoDate', date);
                        $('#calendar').fullCalendar('changeView', 'agendaDay');
                    }
                },
                eventRender: function(event) {
                    console.log('event render:', event);
                },
                eventAfterRender: function(event) {
                    console.log('event after render:', event);
                },
                eventClick: function(event, jsEvent, view) {
                    console.log('event click:', event, jsEvent, view);
                },

                dragScroll: false,
                droppable: false,//: 1,
                timezone: 'local',
                aspectRatio: 1.6,
                select: function(start, end) {
                    console.log('select clicked:', start, end);
                    console.log('---> day click 2');
                }
            })
    });

Зависимости:

"dependencies": {
    "angular-joyride": "^1.0.10",
    "angular-material-badge": "^1.2.9",
    "angular-touch": "^1.5.8",
    "bootstrap": "^4.0.0",
    "intro.js": "^2.9.3",
    "jquery-parallax.js": "^1.5.0",
    "jquery-ui": "^1.12.1",
    "jquery.ui.touch": "0.0.1",
    "moment-timezone": "^0.5.23",
    "save-dev": "^2.0.0",
    "webpack": "^3.10.0"
  },
  "devDependencies": {
    "@uirouter/angularjs": "^1.0.13",
    "angular": "^1.5.8",
    "angular-animate": "^1.5.8",
    "angular-aria": "^1.5.8",
    "angular-cookies": "^1.5.8",
    "angular-fullpage.js": "^0.2.6",
    "angular-material": "^1.1.10",
    "angular-messages": "^1.5.8",
    "angular-resource": "^1.5.8",
    "angular-route": "^1.5.8",
    "angular-translate": "^2.18.1",
    "angular-ui-bootstrap": "^2.5.6",
    "angular-ui-calendar": "^1.0.2",
    "babel-loader": "^7.1.2",
    "babel-minify-webpack-plugin": "^0.2.0",
    "babel-plugin-angularjs-annotate": "^0.8.2",
    "clean-webpack-plugin": "^1.0.0",
    "copy-webpack-plugin": "^4.5.1",
    "css-loader": "^0.28.9",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "font-awesome": "^4.7.0",
    "font-awesome-sass-loader": "^2.0.1",
    "font-awesome-webpack": "0.0.5-beta.2",
    "fullcalendar": "^3.4.0",
    "fullpage.js": "^2.9.7",
    "html-loader": "^0.5.5",
    "html-minify-loader": "^1.3.0",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "^3.3.1",
    "ng-file-upload": "^12.2.13",
    "ng-template": "^1.0.0",
    "ngtemplate-loader": "^2.0.1",
    "raw-loader": "^0.5.1",
    "roboto-fontface": "^0.8.0",
    "statuses": "^1.4.0",
    "style-loader": "^0.20.1",
    "url-loader": "^0.6.2",
    "webpack-bundle-analyzer": "^2.13.0",
    "webpack-dev-server": "^2.11.3"
  }

1 Ответ

0 голосов
/ 09 декабря 2018

Оказалось, что Angular Material 1.1.10 мешает полноценному календарю.Это каким-то образом переопределяет обработку касаний.И событие распознается как mousedown вместо touchstart.

Решение состоит в том, чтобы удалить все события указателя из:

var START_EVENTS = 'mousedown touchstart pointerdown';
var MOVE_EVENTS = 'mousemove touchmove pointermove';
var END_EVENTS = 'mouseup mouseleave touchend touchcancel pointerup pointercancel';

через https://stackoverflow.com/a/42620599/5940387

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...