1. 技术文章
  2. fullcalendar multiple cell select on mobile device?

fullcalendar multiple cell select on mobile device?

由 我与影子孤独终老i 提交于 2019-11-26 15:26:15

How about adding event listeners to the cells of already initialized calendar and applying some magic, like this:

$('#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);
});

I know this is a bit low-level comparing to the rest of your code, but that can help. These events will only work on mobiles and probably you will be able to achieve the desired behavior. Sorry no time to try this approach myself, maybe I'll try that later on jsFiddle.

another solution is Datebox. i've implemented it in my jquery mobile application , its easy to use. and very good for both on computer,mobile,tblet http://dev.jtsage.com/jQM-DateBox2/

Just to add to this old question...

A solution without touch punch:

I have personally implemented the fullcalendar for mobilie and was having trouble with the touchmove handling of multiselect so I decided to do it all just based on the html day objects themselves.

I just get the height/width of what is first selected and count the distance moved in relation to that height/width. It requires a SelectDates(date1, date2) function to handle whatever you want to do with the daterange your select.

Here is my code:

        $(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);
            }
        })

Also.. if your SelectDates() does any heavy lifting, you might want to only have it fire every x amount of pixels moved or x amount of millisecond... either that or just save off the values then do the processing when you stop. My SelectDates() added css to the calendar so I wanted it to fire continuously with the touch move motion.

user2511667

This answer was found in another StackOverflow post: How can we specify custom date range with fullcalendar?

You can call this function to get events from a date range. However, this will bring you only 30 days events.

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');
    }
}

After lot of searches I found no simple and clear answer, So, I made it by myself, and here it's:

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');
    }
});
arunky

From my experience i never found calender as a good option for such tasks. Try using datepicker instead - http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/

标签
jquery
jquery-plugins
jquery-mobile
jquery-selectors
fullcalendar
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!