我使用 Phonegap 为 Android 和 iPhone 等移动设备创建了一个完整的日历应用程序。我正在使用Jquery Touch Punch 插件和 Jquery fullcalendar 插件。fullcalendar 的“选择”方法在网络上运行良好。我可以在网络浏览器上的完整日历的月份视图中选择多个单元格。但是,在本机 android/iPhone 应用程序上,我无法选择日历的多个单元格(日期范围)。所发生的一切是当我单击单元格以选择日期范围时,在允许我在设备上选择多个日期之前触发“选择”方法。有没有办法克服这个问题?先感谢您。这是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
});
});
});
[对版主的谦虚请求:除非问题得到解决,否则请不要关闭此问题。谢谢]