移动设备上的全日历多个单元格选择? [英] fullcalendar multiple cell select on mobile device?
问题描述
我使用 Phonegap 为 Android 和 iPhone 等移动设备创建了一个完整的日历应用程序.我正在使用 Jquery Touch Punch 插件连同 Jquery fullcalendar 插件.fullcalendar 的选择"方法在网络上运行良好.我可以在网络浏览器上的完整日历的月份视图中选择多个单元格.但是，在本机 android/iPhone 应用程序上，我无法选择日历的多个单元格(日期范围).所发生的一切是当我单击单元格以选择日期范围时，在允许我在设备上选择多个日期之前触发选择"方法.有没有办法克服这个问题?先感谢您.这是 Jsfiddle.
I have created a fullcalendar application for mobile device like Android and iPhone using Phonegap. I am using the Jquery Touch Punch Plugin along with the Jquery fullcalendar plugin. The 'select' method of fullcalendar is working fine on the web. I am able to select multiple cell on the month view of the full calendar on web browser. However, on the native android/iPhone app I am not able to select multiple cell(range of dates) of the calendar. All that happens is when I click on the cell to select range of dates then the 'select' method is triggered before allowing me to select multiple dates on the device. Is there anyway to overcome this issue? Thank you in advance. Here is the Jsfiddle.
示例代码:
// FullCalendar v1.5
// Script modified from the "theme.html" demo file
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month'
},
editable: true,
disableDragging: true,
disableResizing: true,
droppable: true,
drop: function( date, allDay, jsEvent, ui ){
console.log(jsEvent);
console.log(ui);
},
// add event name to title attribute on mouseover
eventMouseover: function(event, jsEvent, view) {
if (view.name == "month") {
$(jsEvent.target).attr('title', event.title);
}
//alert(event.id);
},
// For DEMO only
// *************
events: [
{ id: 1,
title: 'User1',
start: '2012-09-01',
end: '2012-09-01',
color:'#E9B33E',
className: 'user-class1'},
{ id: 2,
title: 'User2',
start: '2012-09-06',
end: '2012-09-06',
color:'#00813E',
className: 'user-class2'},
{ id: 3,
title: 'User3',
start: '2012-09-06',
end: '2012-09-06',
color:'#E59238',
className: 'user-class3'},
{ id: 4,
title: 'User4',
start: '2012-09-06',
end: '2012-09-06',
color:'#00813E',
className: 'user-class4'},
{ id: 5,
title: 'User5',
start: '2012-09-08',
end: '2012-09-08',
color:'#00813E',
className: 'user-class5'},
],
eventRender: function(event,element,calEvent) {
element.attr('id',this.id);
if(this.id!=5){
element.find(".fc-event-title").after($("<br/><span class="fc-event-icons"></span>")
.html("<img src="http://png-5.findicons.com/files//icons/2018/business_icons_for/16/passport.png" onclick="javascript:iconsAlert("+this.id+",'passport')" class="icon"/>"+
"<img src="http://findicons.com/files//icons/1571/chalkwork_payments/16/card_visa.png" onclick="javascript:iconsAlert("+this.id+",'visa')" class="icon" />"+
"<img src="http://findicons.com/files//icons/894/banking_stuff/16/postage_stamp.png" onclick="javascript:iconsAlert("+this.id+",'traveldoc')" class="icon" />"+
"<img src="http://findicons.com/files//icons/756/ginux/16/richtext.png" onclick="javascript:iconsAlert("+this.id+",'entrystamp')" class="icon" />"));
}
element.droppable({
accept: '*',
tolerance: 'touch',
//activeClass: 'ui-state-hover',
//hoverClass: 'ui-state-active',
drop: function(ev, ui) {
//console.log(ev.id);
alert(this.id);
//for(param in ui){ console.log(ev.id);}
}
});
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
alert("Cell selected from "+$.fullCalendar.formatDate(start, 'yyyy-MM-dd')+" to "+$.fullCalendar.formatDate(end, 'yyyy-MM-dd'));
},
eventClick: function(calEvent, jsEvent, view) {
if (!$(jsEvent.target).hasClass("icon")) {
alert("UserID:"+calEvent.id);
}
}
});
$('#external-events div.passport-event,.visa-event,.entrystamp-event,.traveldoc-event').each(function() {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()), // use the element's text as the event title
className: $(this).attr('class')
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
});
[对版主的谦虚请求:请不要关闭这个问题，除非它得到解决.谢谢]
[Humble request to moderators: Please do not close this question unless it is resolved. Thanks]
推荐答案
如何将事件侦听器添加到已初始化日历的单元格并应用一些魔法，如下所示:
How about adding event listeners to the cells of already initialized calendar and applying some magic, like this:
$('#calendar table.fc-border-separate td.ui-widget-content').on('touchstart', function (event) {
/* touch start processing, probably cancelling like*/
event.preventDefault();
event.stopImmediatePropagation();
function mouseMoveHandler (event) {
/* processing actual drag */
/* possible also cancelling default behavior and instead calling Calendar API */
}
function mouseUpHandler (event) {
/* processing mouse up */
/* some clean up */
$(document).off('touchmove', mouseMoveHandler)
.off('touchend touchleave touchcancel', mouseUpHandler);
}
$(document).on('touchmove', mouseMoveHandler)
.on('touchend touchleave touchcancel', mouseUpHandler);
});
我知道与您的其他代码相比，这有点低级，但这会有所帮助.这些事件仅适用于手机，并且您可能能够实现所需的行为.抱歉没有时间自己尝试这种方法，也许我稍后会在 jsFiddle 上尝试.
I know this is a bit low-level comparing to the rest of your code, but that can help. These events will only work on mobiles and probably you will be able to achieve the desired behavior. Sorry no time to try this approach myself, maybe I'll try that later on jsFiddle.
这篇关于移动设备上的全日历多个单元格选择?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
