Glissez et déposez les événements cachés sur Fullcalendar

Question

Je suis coincé ici et j'ai besoin d'aide sérieuse. J'ai dû faire un peu de travail en utilisant fullcalendar, j'ai tout fait en suivant la procédure standard. Le calendrier affiche tous les événements sur les emplacements corrects qui fonctionnent bien. Certains événements doivent être restitués mais restent cachés et attendent qu'un événement soit montré, donc ce que j'ai fait ici était seulement de mettre l'attribut d'affichage de css à none quand caché et bloquer quand visible. Jusqu'à présent, tout fonctionne parfaitement, le problème survient lorsque vous faites glisser et l'événement de slot A à slot B, pour une raison étrange lorsque l'événement de glisser commence, la boîte d'événement doit être proche du curseur, mais ce n'est pas le cas régler autour de 200px ci-dessous et 100px à droite du curseur. J'ai fait du débogage et j'ai trouvé que, même si les attributs haut et gauche de la boîte d'événements sont correctement définis (disons top: 300px, left: 150px), lorsque l'événement drag commence, la valeur de gauche passe à 0px et Le sommet va comme 580px. Je ne comprends pas pourquoi cela se passe, qu'est-ce que je fais de mal, ou s'il y a quelque chose que je devrais faire

Answer 1

Le problème est que FullCalendar utilise l'utilitaire Position de l'interface utilisateur de jQuery pour déterminer où les événements sont rendus, et plus les navigateurs font un mauvais travail en spécifiant le haut/gauche sur les éléments cachés. Ainsi, lorsque vous rendez les événements visibles, jQuery n'a aucune idée réelle de l'endroit où ils se trouvent et finit par faire les choses folles que vous voyez.

Solution la plus simple: n'utilisez pas les CSS pour afficher/masquer vos événements. Utilisez l'API FullCalendar pour créer l'événement une fois qu'il doit être affiché. renderEvent est la chose que vous voulez:

$('#mycalendar').fullCalendar('renderEvent', event [, stick ]) 

Autre possibilité: spécifier en plus top: 0px; left: 0px dans votre CSS qui définit également display: none;. Parfois, cela permet à la position de fonctionner correctement.