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($("
") .html("
"+ ""+ ""+ "")); } 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]