seleção de célula múltipla fullcalendar no dispositivo móvel?

Eu criei um aplicativo fullcalendar para dispositivos móveis como Android e iPhone usando o Phonegap. Eu estou usando o Jquery Touch Punch Plugin junto com o plugin Jquery fullcalendar. O método ‘select’ do fullcalendar está funcionando bem na web. Eu sou capaz de selecionar várias células na exibição mês do calendar completo no navegador da web. No entanto, no aplicativo Android / iPhone nativo, não consigo selecionar várias células (intervalo de datas) do calendar. Tudo o que acontece é quando eu clico na célula para selecionar o intervalo de datas, em seguida, o método ‘select’ é acionado antes de permitir que eu selecione várias datas no dispositivo. Existe alguma maneira de superar esse problema? Agradeço antecipadamente. Aqui está o Jsfiddle .

Código de amostra:

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

[Solicitação humilde aos moderadores: Por favor, não feche esta questão, a menos que seja resolvido. Obrigado]

Que tal adicionar ouvintes de events às células do calendar já inicializado e aplicar alguma mágica, como esta:

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

Eu sei que isso é um pouco baixo comparando com o resto do seu código, mas isso pode ajudar. Esses events só funcionam em celulares e provavelmente você conseguirá atingir o comportamento desejado. Desculpe não tenho tempo para tentar esta abordagem eu mesmo, talvez eu tente isso mais tarde no jsFiddle.

Outra solução é a checkbox de data. Eu o implementei no meu aplicativo móvel jquery, é fácil de usar. e muito bom tanto para computador, celular, tblet http://dev.jtsage.com/jQM-DateBox2/

Apenas para adicionar a essa pergunta antiga …

Uma solução sem toque de soco:

Eu pessoalmente implementei o fullcalendar para mobilie e estava tendo problemas com o manuseio touchmove do multiselect, então decidi fazer tudo apenas com base nos próprios objects html day.

Acabei de obter a altura / largura do primeiro selecionado e contar a distância movida em relação a essa altura / largura. Ele requer uma function SelectDates (date1, date2) para lidar com o que você quer fazer com a daterange de sua seleção.

Aqui está o meu código:

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

Além disso … se o seu SelectDates () faz qualquer trabalho pesado, você pode querer que ele seja acionado a cada x quantidade de pixels movidos ou x quantidade de milissegundo … ou que apenas salve os valores e faça o processamento quando parar . Meus SelectDates () adicionaram css ao calendar, então eu queria que ele fosse acionado continuamente com o movimento de movimento de toque.

Essa resposta foi encontrada em outra postagem do StackOverflow: Como podemos especificar um período personalizado com fullcalendar?

Você pode chamar essa function para obter events de um período. No entanto, isso trará apenas 30 dias para 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'); } } 

Depois de muitas buscas eu não encontrei uma resposta simples e clara, então, eu fiz sozinha, e aqui está:

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

Pela minha experiência, nunca encontrei o calendar como uma boa opção para essas tarefas. Tente usar o datepicker em vez disso – http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/