27

我使用 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
        });

    });
});

[对版主的谦虚请求:除非问题得到解决,否则请不要关闭此问题。谢谢]

4

6 回答 6

2

如何将事件侦听器添加到已初始化日历的单元格并应用一些魔法,如下所示:

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

于 2014-01-27T17:33:35.107 回答
1

只是为了补充这个老问题......

无触摸打孔的解决方案:

我已经亲自实现了移动日历的完整日历,并且在多选的 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 添加到日历中,因此我希望它通过触摸移动动作连续触发。

于 2014-05-19T10:11:52.243 回答
1

这个答案是在另一个 StackOverflow 帖子中找到的:How can we specify custom date range with 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');
    }
}
于 2013-07-18T15:23:20.023 回答
1

另一个解决方案是 Datebox。我已经在我的 jquery 移动应用程序中实现了它,它易于使用。非常适合电脑、手机、平板电脑 http://dev.jtsage.com/jQM-DateBox2/

于 2013-08-27T16:06:14.640 回答
1

经过大量搜索,我没有找到简单明了的答案,所以,我自己做了,这里是:

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');
    }
});
于 2015-05-08T10:56:29.143 回答
-2

根据我的经验,我从来没有发现日历是完成此类任务的好选择。尝试改用 datepicker - http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/

于 2012-10-19T17:46:22.993 回答