jquery - 触摸事件在 FullCalendar v.-3.9 中不起作用?
问题描述
我正在使用FullCalendar 3.9版本的插件来显示驱动程序事件。点击事件在桌面视图上起作用,但在移动设备上不起作用,因为在手机上触摸事件起作用。那么如何在日历上绑定触摸事件并显示数据。
在eventClick:我使用两种方法fullCalendar({})
$("#openFancybox").fancybox();
$("#openFancybox").click();
所以我想在点击时触发这些方法。但它没有开火。我也删除了所有方法,只是alert('test')
但它也不起作用。没有出现错误我不知道是什么原因?
我的 JS 代码
$('#calendar').fullCalendar(
eventClick: function (calEvent, jsEvent, view) {
$(this).css('border-color', 'yellow');
url = '{{ route("boking-details", 'XXX') }}'.replace('XXX', calEvent.booking_id);
$.fancybox.destroy();
element = '<a id="openFancybox" data-type="ajax" data-src="' + url + '" href="javascript:;"></a>'
$(".element").html(element);
$("#openFancybox").fancybox();
$("#openFancybox").click();
},
eventDrop: function(event, delta, revertFunc, jsEvent, ui, view) {
if (confirm("This booking has now been moved."+ " with booking time " + event.start.format() )) {
changeBooking(event, delta, revertFunc);
//savedrop(event.id,event.start,event.end);
} else {
$('.popover').popover('hide');
revertFunc();
}
},
eventRender: function(eventObj, $el) {
$el.popover({
title: eventObj.title,
content: eventObj.description,
trigger: 'hover',
placement: 'top',
container: 'body'
});
},
timeFormat : "H(:mm)",
//slotLabelFormat:"HH:mm",
displayEventTime: false,
// now: '2018-11-07',
editable: true, // enable draggable events
dragRevertDuration: 1000,
aspectRatio: 2.5,
scrollTime: '10:00', // undo default 6am scrollTime
slotDuration: '00:15:00',
slotLabelInterval: 15,
header: {
left: 'today, prev,next',
center: 'title',
right: 'timelineMonth,timelineWeek,timelineDay'
},
defaultView: 'timelineMonth',
views: {
timelineThreeDays: {
type: 'timeline',
duration: {days: 3}
},
timelineWeek: {
type: 'timeline',
dayOfMonthFormat: 'ddd DD/MM',
//titleFormat: '(d MMMM yyyy)'
//titleFormat:"HH",
},
timelineDay: {
type: 'timeline',
//timeFormat: 'H:mm',
slotLabelFormat:"HH",
}
},
resourceLabelText: 'Drivers & Companion',
events: '{{route("all-driver-calender",["type"=>"bookings"])}}&driver_id='+getDriverIdFromURL(),
resources:'{{route("all-driver-calender",["type"=>'driverName'])}}&driver_id='+getDriverIdFromURL()
});
});
解决方案
我通过设置解决了我的问题。它正在工作FullCalendar v-3.9。现在在移动设备上工作的每个按钮都非常小,比如 560 像素(4 英寸、5 英寸等)。
width:800px,
height:600px,
推荐阅读
- reactjs - React - 绑定数据时显示消息
- python - 如何从 django 视图运行 python 脚本
- c# - 如何将变量放入列表内的对象中
- java - Java在Java程序中运行Main方法之后不要退出
- c++ - 当窗口管理器在 qt QML 中调整窗口大小时如何获得信号?
- coq - 无法在定义中使用 destruct tatic 的问题
- django - Django Rest API 在两个类中合并删除/获取/更新/获取方法
- mysql - 永远不要将容器设置为 'up' [docker]
- node.js - Please ensure that your service worker file contains the following:/(const precacheManifest =)\[\](;)/
- ios - How to show image from url in ios swift