25
Tôi đã tạo một ứng dụng fullcalendar cho thiết bị di động như Android và iPhone bằng cách sử dụng Phonegap. Tôi đang sử dụng Jquery Touch Punch Plugin cùng với plugin Jquery fullcalendar. Phương thức 'chọn' của fullcalendar đang hoạt động tốt trên web. Tôi có thể chọn nhiều ô trên chế độ xem theo tháng của toàn bộ lịch trên trình duyệt web. Tuy nhiên, trên ứng dụng Android/iPhone gốc tôi không thể chọn nhiều ô (phạm vi ngày) của lịch. Tất cả những gì xảy ra là khi tôi nhấp vào ô để chọn phạm vi ngày thì phương pháp 'chọn' được kích hoạt trước khi cho phép tôi chọn nhiều ngày trên thiết bị. Có anyway để khắc phục vấn đề này? Cảm ơn bạn trước. Đây là Jsfiddle.fullcalendar nhiều ô được chọn trên thiết bị di động?
mẫu mã:
// 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 yêu cầu kiểm duyệt: Xin đừng đóng câu hỏi này trừ khi nó được giải quyết. Cảm ơn]
có bất kỳ giao diện điều khiển đầu ra từ Mobile Safari? $ (document) .ready() có thể là một vấn đề cũng như jQM sử dụng $ (document) .bind ('pageinit') http://jquerymobile.com/demos/1.1.1/docs/api/events.html –
@PhillPafford không thể thấy bất kỳ điều gì trong bảng điều khiển. Cảm ơn bạn rất nhiều vì đã xem xét điều này. Xin hãy xem http://jsfiddle.net/veer712/KrZJr/17/ cũng như –
Nếu bạn đang cố gắng nhấp vào + kéo, hãy tận tâm thực tế là tôi cũng phải giải quyết bằng nhấp chuột. :) –