fullcalendar多个小区在移动设备选择？(fullcalendar multiple cel

我已经创建了Android和iPhone等使用PhoneGap的移动设备应用程序fullcalendar。我使用Jquery的触摸冲床插件与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
        });

    });
});

[谦卑请求版主：除非得到解决，请不要关闭这个问题。谢谢]

Answer 1:

如何添加事件侦听器已初始化日历的细胞，并运用一些神奇的，就像这样：

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

Answer 2:

另一种解决方案是Datebox。我在我的jQuery Mobile的应用程序，其易于使用付诸实施。并针对计算机上很不错，移动，tblet http://dev.jtsage.com/jQM-DateBox2/

Answer 3:

只需添加到这个老问题？

没有触摸冲头A液：

我曾亲自实施了mobilie的fullcalendar，并具有多选的的TouchMove处理麻烦，所以我决定一切只是基于HTML一天对象本身去做。

我刚刚得到一个什么样首先选择的高度/宽度和计数就该高度/宽度移动的距离。它需要一个SelectDates（DATE1，DATE2）函数来处理任何你想用你的日期范围选择这样做。

这里是我的代码：

        $(document).on('touchmove', '.fc-day', function (e) {
            var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];

            var $startElement = $(this);
            var moveStartDate = new Date($startElement.data('date'));
            var timezoneOffset = moveStartDate.getTimezoneOffset() * 60000;
            moveStartDate.setTime(moveStartDate.getTime() + timezoneOffset);

            var rect = $startElement[0].getBoundingClientRect();

            var DayHeight = $startElement[0].clientHeight;
            var DayWidth = $startElement[0].clientWidth;

            var xdif = 0;
            if (touch.pageX < rect.left) {
                xdif = touch.pageX - rect.left;
            }
            if (touch.pageX > rect.right) {
                xdif = touch.pageX - rect.right;
            }
            var xDaysAwayDecimal = xdif == 0 ? 0 : (xdif / DayWidth);
            var xDaysAway = xdif >= 0 ? Math.ceil(xDaysAwayDecimal) : Math.floor(xDaysAwayDecimal);

            var ydif = 0;
            if (touch.pageY < rect.top) {
                ydif = touch.pageY - rect.top;
            }
            if (touch.pageY > rect.bottom) {
                ydif = touch.pageY - rect.bottom;
            }
            var yDaysAwayDecimal = ydif == 0 ? 0 : (ydif / DayHeight);
            var yDaysAway = ydif >= 0 ? Math.ceil(yDaysAwayDecimal) : Math.floor(yDaysAwayDecimal);

            var dayModifier = (yDaysAway * 7) + xDaysAway;

            var moveEndDate = new Date(moveStartDate);
            moveEndDate.setDate(moveEndDate.getDate() + dayModifier);
            if (moveStartDate > moveEndDate) {
                SelectDates(moveEndDate, moveStartDate);
            }
            else {
                SelectDates(moveStartDate, moveEndDate);
            }
        })

还..如果您SelectDates（）没有任何繁重，你可能想只有它开火移动或毫秒的X像素量每x量...要么或刚刚保存过的值，然后做处理当你停止。我SelectDates（）添加CSS到日历，所以我希望它与触摸移动动作不断开火。

Answer 4:

这个答案是在其他的StackOverflow后发现：我们怎么可以指定fullcalendar自定义日期范围？

你可以调用这个函数从一个日期范围内获取事件。但是，这会带给你只有30天的事件。

function GetAgendaEvents(datefrom, dateTo) {
    var fromDate = new Date($("#from").val());
    var toDate = new Date($("#to").val());

    if (fromDate.getTime() <= toDate.getTime()) {
        $('#fullcal').fullCalendar('removeEvents').fullCalendar('addEventSource', events);
        $('#fullcal').fullCalendar('refetchEvents');

        var filteredEvent = $('#fullcal').fullCalendar('clientEvents', function (event) {
            return event.start >= fromDate && event.start <= toDate;
        });

        $('#fullcal').fullCalendar('gotoDate', fromDate.getFullYear(), fromDate.getMonth(), fromDate.getDate());
        $('#fullcal').fullCalendar('changeView', 'agenda'/* or 'basicDay' */);

        $('#fullcal').fullCalendar('removeEvents').fullCalendar('addEventSource', filteredEvent);
        $('#fullcal').fullCalendar('refetchEvents');
    }
}

Answer 5:

大量的搜索，我发现没有简单和明确的答案后，所以，我自己做到了，在这里它是：

var calendar = $('#calendar').fullCalendar({
     .. 
    ....
     ..
    dayRender: function( date, cell) {
        $(cell).on("touchend",function(event){
            var startDate = date;
            var x= event.originalEvent.changedTouches[0].clientX;
            var y = event.originalEvent.changedTouches[0].clientY
            var endDate = moment($(document.elementFromPoint(x, y)).attr("data-date"),"YYYY-MM-DD");
            if(endDate>startDate){
                calendar.fullCalendar( 'select', startDate, endDate.add('days', 1));
            }else{
                calendar.fullCalendar( 'select', endDate, startDate.add('days', 1));
            }
        });
    },
    select: function(start, end, allDay, jsEvent, view) {
         .. 
        ....
         .. 
        calendar.fullCalendar('unselect');
    }
});