web-dev-qa-db-fra.com

Concevoir un calendrier hebdomadaire dynamique et réactif

Je crée un calendrier hebdomadaire réactif dynamique à l’aide de Twitter Bootstrap .

Voici ma mise en œuvre actuelle: http://jsfiddle.net/dvirazulay/Lhe7C/ (était un peu long à coller ici dans son intégralité)

Et voici une capture d'écran de celle-ci:

enter image description here

Ce que j'essaie de réaliser est un design totalement dynamique - générer la vue initiale à partir de mon serveur n'est pas un problème, mais un peu compliqué, car mon implémentation actuelle utilise tables. Je crains qu'il ne soit difficile de le maintenir du côté JavaScript des choses, c'est-à-dire supprimer des événements/les ajouter à la volée.

De toute évidence, j'ai choisi les tables comme il me paraissait logique - un calendrier hebdomadaire est essentiellement un tableau. Je vais décrire ma conception:

  1. Un événement peut durer plus de 30 minutes. J'utilise donc rowspan pour définir combien d'heures il doit s'étendre.
  2. Il peut y avoir deux événements en conflit (je n'en autorise pas plus de deux). Dans leur configuration actuelle, ils s'affichent côte à côte, chacun prenant 50% de la largeur de l'événement et prenant la hauteur nécessaire pour représenter l'heure de fin.
  3. À l'arrière, je calcule le nombre de td que je dois ignorer afin de ne pas avoir de colonnes supplémentaires à la fin du tableau (car rowspan en déplace certaines vers la droite).

Mes questions sont les suivantes:

  • Est-ce la bonne approche?
  • Devrais-je appliquer la même logique d'arrière-plan au serveur principal et recalculer la quantité de trtd à afficher en fonction du nombre d'événements que j'ai, ou existe-t-il une meilleure solution pour cela?

Idéalement, une bonne réponse devrait décrire comment gérer les événements sur le front-end sans complications ou une autre conception (sensible!) Pour ce problème. 

Je ne veux pas utiliser un plugin existant, car j'ai recherché et essayé plusieurs, et je veux garder ce poids très léger, mais si vous avez une bonne suggestion pour celui qui remplit les conditions requises - j'aimerais vérifier IT out! (le calendrier de la semaine jQuery est trop lent et encombré par exemple)

_/Note: Je n'ai pas l'intention de prendre en charge les navigateurs plus anciens que IE9.

javascriptjqueryhtmlcsstwitter-bootstrap
18
Dvir Azulay

Après des recherches sur les problèmes et des consultations avec quelques experts en amont, j'ai conclu que les conserver comme tables était la meilleure option, même si les générer n'était pas trivial.

Bien que cette décision rend difficile la modification dynamique de la planification sans générer de nouveau le tableau entier, les avantages des éléments de style qui devraient sont des tableaux payants - alignement, largeur, hauteur, bordures, etc. Tous sont faciles à contrôler et fonctionnent parfaitement entre navigateurs.

Il est important de noter que cette approche rend la réactivité du calendrier une qualité triviale.

4
Dvir Azulay

Utiliser une table est une bonne approche.

Ok, ceci est une solution basée sur jQuery au problème "les lignes de rangées sont poussées à droite" . L’origine du problème est une génération de table incorrecte dans le backend.

Par exemple, si un td avec rowspan = "3" est rendu, les td situés à la même position d'index de colonne dans les deux lignes suivantes seront affectés et poussés à droite. Ceci est indésirable.

<table border="1">
<tr>
    <td>07:30</td>
    <td rowspan="3">Event 07:30 to 09:00</td>
</tr>
<tr>
    <td>08:00</td>
    <td>Should not be rendered.</td>
</tr>
<tr>
    <td>08:30</td>
    <td>Should not be rendered.</td>
</tr>
<tr>
    <td>09:00</td>
    <td>C</td>
</tr>

La solution correcte est une génération de table correcte dans le backend . Le rendu des td après le rowspan ne devrait simplement pas se produire . Si vous savez que vous restituez un rowspan = "3", agissez en conséquence. :)

Quoi qu'il en soit, s'il n'est pas possible de modifier le rendu de la table, utilisez jQuery pour le corriger:

http://jsfiddle.net/9tQvu/3/

1
Jens A. Koch

L'utilisation de CSS et de divs, au lieu de cellules de tableau, pourrait être plus précise et sera certainement plus facile à calculer côté client et à conserver la réactivité. Voici un exemple pseduo-CSS/JS pour le premier événement:

.event:first-child {
    height: `(1.5/24)*100`%; /* 6.25%, based on duration */
    position: absolute;
    top: `(10/24)*100`%; /* 41.7%, based on event start */
}
0
Alastair

dhtmlxScheduler - Calendrier des événements Ajax/JavaScript

dhtmlxScheduler est un calendrier d'événements JavaScript qui vous permet d'ajouter un planificateur similaire à Google à votre application Web ou à votre site Web. L’interface intuitive de glisser-déposer permet aux utilisateurs finaux de gérer rapidement des événements et des rendez-vous dans différentes vues: Jour, Semaine, Mois, Année, Agenda, Chronologie, etc. Très léger (environ 20 kb compressé), hautement personnalisable et rapide, fournit un moyen rapide d’ajouter un calendrier d’événements basé sur Ajax sur une page Web.

0
Ganesh Bora

C'est une manière parfaitement acceptable de le faire. 

Si j'étais vous, j'utiliserais probablement des divs, car ils sont plus gérables et plus faciles à utiliser avec CSS et sont plus standards.

En dehors de cela, je pense que vous adoptez une bonne approche et que vous devriez probablement faire la première partie de la même manière que la dernière, car vous savez que cela fonctionne.

En ce qui concerne la gestion des événements, je voudrais simplement trier les divs par type à l'aide de classes, puis utiliser des gestionnaires d'événements avec les types d'événements que vous souhaitez utiliser (je ne sais pas ce que vous voudriez à part cliquer sur) des classes correspondantes. 

0
maxhud

que se passe-t-il lorsqu'un événement ne se chevauche que partiellement avec un autre, je veux dire, deux événements qui se chevauchent représentent 50% du temps total, mais si l'un d'eux se termine plus tôt et l'autre plus tard, celui qui continue, prend toute la largeur de la "prochaine" rangée ou continuer à 50% de la largeur? que se passe-t-il si l'événement A se situe entre 8h00 et 8h30 et que l'événement B se situe entre 8h00 et 18h00? il devrait être gentil que l’événement B occupe toute la largeur jusqu’à ce qu’il y ait un autre événement qui se chevauche .. mais je suppose que cela pourrait être un peu compliqué ... juste une pensée. Bon codage, c'est vraiment un beau projet.

0
Matteo Bononi 'peorthyr'