GanttCalendar + VectorManager

Utilisation de VectorManager

VectorManager est une bibliothèque JS destinée à gérer les vecteurs au sens mathématique (développée par l’auteur de cet article). Avec le GanttCalendar, il est possible de faire calculer à cette bibliothèque JS une information sur l’occupation des ressources d’un calendrier. Le GanttCalendar a donc été mis à jour avec VectorManager pour ajouter cette information pertinente : « au moins une ressource est occupée » et « toutes les ressources sont occupées ».

Pour ces 2 informations, 2 barres sont ajoutées dans le groupe de ressources :

  • bleu : « au moins une ressource est occupée »
  • rouge : « toutes les ressources sont occupées »

 

Bonus : Cette représentation supporte le zoom sur les calendriers sans ajouter de code spécifique. C’est l’avantage de rester sur la notion mathématique le plus loin possible dans le code, jusqu’au moment de l’affichage.

 

Exemples

Calendrier hebdomadaire :

Zoom sur le calendrier mensuel :

 

Démo

Les liens suivants permettent de voir le résultat en live :

Ces pages ont été testées avec FireFox. Il est fort probable qu’Internet Explorer n’affiche pas correctement les calendriers.

 

Sources

https://github.com/jchome/ganttCalendar

GanttCalendar Hebdomadaire

Suite à la publication du plugin GanttCalendar en mode « affichage mensuel », j’ai créé une version hebdomadaire, avec les mêmes fonctionnalités.

Le zoom est aussi disponible en 4 niveaux.

Voir la démo

Les fonctionnalités de changement de semaine (précédente / suivante) ne sont pas encore au point…

« Zoom feature » sur le GanttCalendar

Après avoir utilisé le ganttCalendar en mode « Affichage mensuel », je me suis rendu compte que dans certains cas, il est intéressant de faire un « zoom arrière » ou un « zoom avant ».

C’est chose faite avec le slider de jQuery UI.

Tester la démo

Voici un aperçu :

La démo du mode « Affichage hebdomadaire » est en cours…

Intégration du GanttCalendar

Suite à l’article sur le GanttCalendar, j’ai intégré ce plugin jquery dans une application web en PHP : « ExoPlanet ».

Intégration dans une application

Le plugin est tout à fait fonctionnel. Les évènements sont présentés sur 1 mois, le Gantt au dessus et la liste des évènements sous forme de tableau en dessous.

Le plugin a été intégré en quelques heures ; le paramétrage a été le plus long.

Gantt Calendar

Voici un calendrier mensuel horizontal pour vos projets. Il permet de lister les ressources sur l’axe vertical et les jours d’un mois sur l’axe horizontal (timeline).

Le code HTML/CSS est complété avec du Javascript et RaphaelJS. Il est nécessaire de l’inclure dans votre code (PHP, J2EE, ASP, …) afin de le rendre véritablement exploitable.

Les évènements sont draggables, le long de l’axe horizontal.

Inspiration : http://dribbble.com/shots/672011-Calendar-of-timeline

Le code est disponible sur google.code. Une image de démo a été publiée sur DeviantArt.

Démo : calendarGantt-demo.html

Il reste à faire

Il reste à gérer les éléments suivants :

  • les évènements souris : click (édition, nouvel item), FAIT
  • drag’n'drop (déplacement, nouvel item). Cette fonctionnalité a été testée avec RaphaelJS, mais c’est extrêmement lent… Je dois trouver une autre solution. FAIT
  • Faire un JS externe
  • Minifier le fichier JS
  • Faire une popup descriptive de l’évènement (fait en dehors de ce widget)
  • Mettre en ligne une démo avec un page de présentation (en cours)
  • Ajouter les jours de semaine

 

Ne sera pas fait

Les différents exports ne seront pas gérés dans ce composant graphique. Vous devrez les implémenter vous-même. C’est comme ça.