jquery – fullcalendar多个单元格选择在移动设备上？

我已经创建了一个fullcalendar应用程序的移动设备，如Android和iPhone使用Phonegap。我使用 Jquery Touch Punch Plugin与Jquery fullcalendar插件。 fullcalendar的’select’方法在网络上正常工作。我可以在网络浏览器上的完整日历的月视图上选择多个单元格。但是，在本机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,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',color:'#E59238',className: 'user-class3'},{   id: 4,title: 'User4',className: 'user-class4'},{   id: 5,title: 'User5',start: '2012-09-08',end: '2012-09-08',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,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
        });

    });
});

[向管理员发出谦卑请求：请不要关闭此问题，除非它已解决。谢谢]

解决方法

如何将事件监听器添加到已经初始化的日历的单元格并应用一些魔术，如下所示：

$('#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。