fullcalendar multiple cell select on mobile device?

Question

I have created a fullcalendar application for mobile device like Android and iPhone using Phonegap. I am using the Jquery Touch Punch Plugin along with the Jquery fullcalendar plugin. The 'select' method of fullcalendar is working fine on the web. I am able to select multiple cell on the month view of the full calendar on web browser. However, on the native android/iPhone app I am not able to select multiple cell(range of dates) of the calendar. All that happens is when I click on the cell to select range of dates then the 'select' method is triggered before allowing me to select multiple dates on the device. Is there anyway to overcome this issue? Thank you in advance. Here is the Jsfiddle.

sample code:

// 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 request to moderators: Please do not close this question unless it is resolved. Thanks]

Answer 1

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.

Answer 2

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/

Answer 3

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.

Answer 4

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

Answer 5

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