jQuery FullCalendar fonctionne sur les appareils tactiles – mais un problème mineur avec les événements

http://page-test.co.uk/cal/ – Démo de FullCalendar

J’ai mis en place ce qui est une configuration de base jQuery FullCalendar avec les extras appropriés pour permettre la prise en charge sur les appareils tactiles.

Les fichiers inclus dans la page liée sont tous ceux par défaut.

La démo fonctionne parfaitement sur les appareils non tactiles, mais les appareils tactiles peinent.

Effectuer des tests principalement sur un iPhone / iPad (les autres appareils tactiles fonctionnent plus ou moins exactement de la même façon) une fois qu’un élément est déplacé, un autre ne peut plus l’être. Ainsi, vous pouvez faire glisser n’importe quel élément, mais les autres sont en quelque sorte verrouillés.

Quelques points clés:

  • Changer de vue (mois / semaine, etc.) permet alors de tout déplacer à nouveau

  • Si vous touchez / touchez d’abord un autre élément, vous pouvez le faire glisser, mais pas d’autres jusqu’à ce que vous les touchiez en premier.

  • Sur un BlackBerry Playbook, il agit en fait légèrement différemment. Si vous allez faire glisser un élément différent (normalement rien ne se passe), alors sur le PlayBook, il semble ne rien faire (lorsque vous passez votre doigt sur l’écran) – mais lorsque vous lâchez (rien n’est encore arrivé) en laissant go it sélectionne l’élément déplaçable puis le désélectionne. Si vous allez ensuite faire glisser cet élément, cela fonctionne bien.

  • La modification de l’orientation de l’appareil verrouille instantanément tous les éléments de la page. Vous devez modifier la vue en mois / semaine ou toucher un élément une fois pour que quoi que ce soit puisse être déplacé.

Je parie que c’est une solution d’une ligne, mais j’ai passé des heures et je ne peux tout simplement pas le faire faire quoi que ce soit.

Je veux juste que ça marche sur iPad / iPhone.

Il semble que ce soit parce que la souris / touchend ne déclenche pas quelque chose ou que l’événement touchstart est supprimé après le premier glissement, mais je ne peux tout simplement pas résoudre le problème.

Modifier:

J’ai utilisé Touch Punch et dayRender pour permettre de sélectionner un ou plusieurs jours sur un appareil tactile. Je viens d’append le source et la fonction addTouch () de Touch Punch à la cellule de rendu du jour:

 dayRender: function( date, cell) { cell.addTouch(); }, 

Cela vous permet au moins de sélectionner un jour ou des jours sur un périphérique tactile. Vous pourrez peut-être utiliser les autres fonctions de Touch Punch ailleurs pour en faire plus, mais je ne l’ai pas encore essayé.


Je rencontre le même problème avec un iPad. J’ai également essayé https://github.com/jboesch/jQuery-fullCalendar-iPad-drag-drop avec mon application complète et je peux en faire glisser un événement, mais je ne peux pas en faire glisser un autre, il défile. J’ai désactivé le défilement, mais j’ai toujours le même comportement. J’ai également essayé la dernière option mentionnée ici https://code.google.com/p/fullcalendar/issues/detail?id=724&q=ipad&colspec=ID%20Type%20Status%20Milestone%20Summary%20Stars avec ce projet https: // github.com/joshgerdes/jquery.ui.touch

Je veux aussi faire une sélection de jours ou d’heures pour créer un événement. J’ai jeté un coup d’oeil au calendrier de Google sur l’iPad, il manque également cette fonctionnalité et ils ont une notification pour utiliser la version mobile si elle ne fonctionne pas sur votre navigateur (safari sur l’iPad). La version mobile n’affiche aucun événement dans la vue mensuelle, elle ne fonctionnera donc pas en tant qu’option pour mon application. Un calendrier complet entièrement fonctionnel avec possibilité de sélection et glisser-déposer serait idéal, mais les appareils tactiles pourraient ne pas prendre en charge cette fonctionnalité. Je continuerai également à chercher une solution, mais si Google ne propose pas cette fonctionnalité, sa mise en œuvre risque d’être difficile et nous devrons peut-être proposer une version mobile et / ou vivre sans sélection et glisser-déposer sur des écrans tactiles. . J’apprécierais grandement l’aide de quelqu’un d’autre.

Utilisez la touche tactile pour faire glisser des événements, ajoutez du code dans eventRender:

 $.support.touch = 'ontouchend' in document; if ($.support.touch) { $(element).draggable(); } 

pour append des fonctionnalités tactiles aux cellules journalières, utilisez un autre fichier js tactile: https://github.com/joshgerdes/jquery.ui.touch et ajoutez cell.addTouch () dans dayRender

Dans quelques jours, j’aurai aussi dans mes calendriers (basé sur Fullcalendar)

http://codecanyon.net/user/wolberspl/portfolio?ref=wolberspl