我想将fullcalendar添加到我的项目中。总的来说，几乎所有的事情都如预期的那样。但现在我面临着一个只出现在移动设备上的问题。当我点击日视图中的某一行时，dayClick和select回调应该被触发。但在安卓浏览器上，除非我改变日期、月份或视图类型(从一天到另一个月(，否则什么都不会发生。因此，所有这些回调都是在渲染新视图时触发的。
我试过调试。在我点击时间段后的桌面上，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"
}
原来Angular Material 1.1.10干扰了fullcalendar。它以某种方式覆盖触摸处理。并且事件被识别为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