Question

我想在我的项目中添加全日历。总的来说，几乎所有东西都能按预期工作。但是现在我面临的问题仅在移动设备上出现。当我在日视图中单击某行时，应触发dayClick和select回调。而且在台式机上也可以。但是在Android Chrome浏览器上，直到我更改日期，月份或视图类型（逐日）后，什么都不会发生。因此，渲染新视图时会触发所有这些回调。

我尝试调试。在单击时间段后，在桌面上，事件类型为“ mouseup”的DragListener.prototype.endInteraction被调用。在移动设备上，仅当我切换视图时才调用此功能。看起来触摸事件被识别为拖动或滚动。只有时隙之外的“点击”-例如“第二天”按钮才被识别为触摸事件。

很难在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"
  }

Answer 1

事实证明，角材料1.1.10干扰了全日历。它以某种方式覆盖了触摸处理。事件被认为是按下鼠标而不是touchstart。

解决方案是删除以下所有指针事件：

while a not in set('FM'):
    ...

通过https://stackoverflow.com/a/42620599/5940387

移动设备上的全日历回调

1 个答案: