Voici plusieurs demandes d’évolutions du compostant Agenda :
Styles
Il faut pouvoir changer le style des évènements dans un calendrier / Agenda en fonction des données.
Il y a déjà 3 hooks qui permettent de surcharger les couleurs du texte, du background et du border.
cf Simplicité® documentation/04-ui/responsive section “Simplicite.UI.Globals.agenda”
- color(obj, item)
- borderColor(obj, item)
- textColor(obj, item)
Le composant FullCalendar supporte également un autre paramètre “classNames” afin de manipuler des classes CSS directement, plus évolutif pour changer les style des contenus.
A partir la V5.1.34, Simplicité possède un nouveau hook front classNames pour spécifier une liste de classes CSS à appliquer en fonction des données, exemple sur la démo :
Simplicite.UI.hooks.DemoOrder = function(o, cbk) {
try {
// Add event classes to change colors
o.locals.ui.agenda.classNames = function(obj, item) {
// Pending is blue
if (item.demoOrdStatus == "P")
return ["bluebg"];
// Validated is green
if (item.demoOrdStatus == "V")
return ["greenbg"];
return ["whitebg"];
};
}
catch(e) { console.error("error", e); }
finally { cbk && cbk(); }
};
On peut utiliser les classes génériques (bluebg, redbg…) , ou créer ses propres classes à mettre dans une ressource STYLES de l’objet, pour spécifier les couleurs mais aussi les fonts, taille du texte, etc.
Utiliser un champ énuméré pour spécifier la couleur d’un event
Un champ ENUM permet de spécifier des couleurs.
Le méta-modèle doit évoluer pour permettre de dire au niveau du paramétrage d’un Agenda quel champ ENUM porte la couleur dans l’agenda, cela évitera de devoir coder ce cas assez fréquent.
Evolution à suivre.
Read-only
Le hook front editable(obj,item) permet de dire si un event est modifiable ou non sur l’agenda (drag/drop + resize). Exemple :
Simplicite.UI.hooks.DemoOrder = function(o, cbk) {
try {
// Is event editable ?
o.locals.ui.agenda.editable = function(obj, item) {
// Pending state only
return item.demoOrdStatus == "P";
};
}
catch(e) { console.error("error", e); }
finally { cbk && cbk(); }
};
Accès à la recherche et à la création
La loupe de recherche pour filtrer et un bouton de Création ont été ajoutés (et backportés en V4).
Il était déjà possible de créer en cliquant sur une plage horaire pour pré-valoriser la date.
Définir les plages horaires de travail
Les options minTime/maxTime permettent de les définir côté front (0h à 24h par défaut).
L’évolution du méta-modèle est en cours pour éviter d’avoir du code à ce niveau, comme par exemple :
Simplicite.UI.hooks.DemoOrder = function(o, cbk) {
try {
// Visible times
o.locals.ui.agenda.minTime = "07:00";
o.locals.ui.agenda.maxTime = "22:00";
// Working time
o.locals.ui.agenda.startTime = "09:00";
o.locals.ui.agenda.endTime = "18:00";
}
catch(e) { console.error("error", e); }
finally { cbk && cbk(); }
};
Utiliser une date de fin plutôt qu’une durée
Le Meta-modèle doit évoluer pour utiliser un champ “date de fin” si l’objet n’a pas de notion de durée, car cela nécessite actuellement de le calculer dans un champ caché = date de fin - date de début.
Evolution à suivre.