我正在使用fullcalendar 3.9版本插件来显示驱动程序事件。其中,单击事件在桌面视图中起作用,但在移动设备中不起作用,因为在移动电话上,触摸事件起作用。那么,我如何在日历上绑定触摸事件并显示数据呢。
在这里,我绑定了一个点击按钮,这样当它点击时就会显示事件的详细信息。但它在移动设备中不起作用。
我的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()
});
});
暂无答案!
目前还没有任何答案,快来回答吧!