FullCalendar Timeline Integration

Bonjour,

J’ai lu pas mal de sujet sur ce forum qui traitaient de l’intégration de fullCalendar.js et des ses fonctionnalités avancées dans simplicité.

Je ne parviens pas à intégrer la fonctionnalité timeline 4.4.2 dans notre build de simplicité (Simplicité version4.0 patch level P24Built on2020-05-29 22:47 (revision bdfa7f9050ca72643aeecb5664a6f46e2b5c3691))

Lorsque mon objet externe est chargé, les ressources JS et CSS de la fonctionnalité timeLine que j’ai ajouté le sont bien aussi. Cependant je remarque aussi que le fullCalendar chargé par simplicité est en version 3.1.0 et il me semble que ce core n’est pas compatible avec le timeline (d’après les autres sujet que j’ai pu voir).


Mais parce que je remet le pied à l’étrier en JavaScript après 5 ans et que ma manière de faire n’est pas forcément bonne, voilà comment j’appelle le fullCalendar:

Merci d’avance !

Bonjour,

il faut utiliser les paramètres systèmes : FULLCALENDAR_LIBS et FULLCALENDAR_VERSION
les appendJSS et appendCSS ne sont plus utiles.

Effectivement, on a prévu d’isoler ce composant via ces 2 paramètres afin de pouvoir ajouter des plugins spécifiquement à votre projet (version payante). Simplicité embarque par défaut que les vues gratuites.

On a eu un long échange avec Rosanne sur le sujet au moment de la mise en place de ces 2 paramètres pour choisir la version 3 ou 4 de fullcalendar + les libs additionnelles :

Je pense que vous y trouverez vos réponses et des exemples de code.

je peux aussi fournir le code que j’ai mis en place et qui fonctionne très bien

Merci beaucoup pour vos réponses, j’ai trouvé le paramètre effectivement et ça règle le problème !

@rosanneQuily: si ça ne vous dérange pas, je suis preneur du code merci beaucoup :)

je vous l’ai envoyé en message direct. 1ère fois que j’utilise cette fonctionnalité :) j’espère que ça fonctionne

Merci pour le code. Je l’ai simplifié pour n’afficher qu’une timeline vide. Ça a partiellement fonctionné, depuis j’ai mis toutes mes ressources directement sur le serveur, j’ai ajouté les paramètres systèmes et ça ne fonctionne plus du tout. La principale question est donc la suivante : Comment appeler la partie javascript depuis le code Java ? J’ai testé 2 methodes :
1)
return javascript("$ui.loadCalendar(function() { "+getName()+".render('"+param+"');})" );
qui me retourne
SyntaxError: JSON.parse: expected property name or '}' at line 1 column 2 of the JSON data

  1. Un appel direct de ma methode render :
    return javascript(getName()+".render('"+param+"')");

qui me retourne

Error: “The FullCalendar view “resourceTimelineDay” does not exist. Make sure your plugins are loaded correctly.”

Alors qu’a priori les ressources sont bien chargées:

Screenshot_1

Paramètres sytème:
FULLCALENDAR_VERSION = 4

FULLCALENDAR_LIBS = {“3”:[
“/fullcalendar/fullcalendar.min.css”,
“/fullcalendar/fullcalendar.min.js”
],
“4”:[
“/fullcalendar/v4/core/main.css”,
“/fullcalendar/v4/timeline/main.css”,
“/fullcalendar/v4/resource-timeline/main.css”,
“/fullcalendar/v4/core/main.js”,
“/fullcalendar/v4/interaction/main.js”,
“/fullcalendar/v4/timeline/main.js”,
“/fullcalendar/v4/resource-common/main.js”,
“/fullcalendar/v4/resource-timeline/main.js”
]}

Code Java:

Code Javascript chargé dans l’objet externe :

J’ai du ajouter les methodes addExtraJS car meme avec les paramètre FULLCALENDAR_LIBS, les modules ne sont pas chargés.

Un exemple simple qui marche:

Code Java serveur: https://github.com/simplicitesoftware/module-demo/blob/master/src/com/simplicite/extobjects/Demo/DemoOrderAgenda.java

Qui “appelle” la fonction render du code JS client: https://github.com/simplicitesoftware/module-demo/blob/master/resources/ObjectExternal/DemoOrderAgenda/SCRIPT.js

NB: je mets des guillemets au “appelle” car ce n’est bien entendu pas le code serveur qui appelle le code JS client mais le code serveur retourne une instruction qui dit au framework client d’appeler la fonction en question

Et je ne cautionne pas du tout les ajouts manuels des libs dans le Java. Il y a un mécanisme qui gère les libs FullCalendar correctement il ne faut pas essayer de le contourner ou le réinventer.

S’il y a une anomalie dans la gestion du param système FULLCALENDAR_LIBS, ce qui n’est pas exclu, on regardera et on corrigera mais je pense que ça nous aurait été signalé par @rosanneQuily

J’ai mis à jour la paramètre fullcalendar_libs :

$ui.grant.sysparams.FULLCALENDAR_LIBS
"{\"3\":[
\"/scripts/fullcalendar/fullcalendar.min.css\",
\"/scripts/fullcalendar/fullcalendar.min.js\"
],
\"4\":[
\"/scripts/fullcalendar/v4/core/main.css\",
\"/scripts/fullcalendar/v4/timeline/main.css\",
\"/scripts/fullcalendar/v4/resource-timeline/main.css\",
\"/scripts/fullcalendar/v4/core/main.js\",
\"/scripts/fullcalendar/v4/interaction/main.js\",
\"/scripts/fullcalendar/v4/timeline/main.js\",
\"/scripts/fullcalendar/v4/resource-common/main.js\",
\"/scripts/fullcalendar/v4/resource-timeline/main.js\"
]}"

Le chemin dans lequel il faut copier les sources est bien le suivant donc ? :

sh-4.2# pwd
/usr/local/tomcat/webapps/ROOT/scripts/fullcalendar/v4
sh-4.2# ls -haltr
total 80K
drwxrwxr-x 2 root root 4.0K May 29 20:49 timegrid
drwxrwxr-x 2 root root 4.0K May 29 20:49 rrule
drwxrwxr-x 2 root root 4.0K May 29 20:49 moment-timezone
drwxrwxr-x 2 root root 4.0K May 29 20:49 moment
drwxrwxr-x 2 root root 4.0K May 29 20:49 luxon
drwxrwxr-x 2 root root 4.0K May 29 20:49 list
drwxrwxr-x 1 root root 4.0K May 29 20:49 interaction
drwxrwxr-x 2 root root 4.0K May 29 20:49 google-calendar
drwxrwxr-x 2 root root 4.0K May 29 20:49 daygrid
drwxrwxr-x 1 root root 4.0K May 29 20:49 core
drwxrwxr-x 2 root root 4.0K May 29 20:49 bootstrap
drwxrwxr-x 1 root root 4.0K May 29 20:49 ..
drwxr-xr-x 2 root root 4.0K Jun 22 15:08 timeline
drwxr-xr-x 2 root root 4.0K Jun 22 15:08 resource-common
drwxrwxr-x 1 root root 4.0K Jun 22 15:08 .
drwxr-xr-x 2 root root 4.0K Jun 22 15:08 resource-timeline

J’ai adapté le code a mon usage mais quand j’arrive sur mon objet externe rien ne se passe. J’ai importé le module de démo et idem. Je continue à chercher ce qui empèche le script de se déclencher.

  1. Il préférable de mettre vos libs dans un répertoire partagé du serveur comme /usr/local/share
    car à chaque upgrade le répertoire /fullcalendar/v4 peut être écrasé.

  2. ensuite le paramètre FULLCALENDAR_LIBS
    essayez de charger votre plugin dans l’ordre après ceux par défaut qui fonctionnent très bien :

    “/scripts/fullcalendar/v4/core/main.min.css”,
    “/scripts/fullcalendar/v4/core/main.min.js”,
    “/scripts/fullcalendar/v4/daygrid/main.min.css”,
    “/scripts/fullcalendar/v4/daygrid/main.min.js”,
    “/scripts/fullcalendar/v4/timegrid/main.min.css”,
    “/scripts/fullcalendar/v4/timegrid/main.min.js”,
    “/scripts/fullcalendar/v4/list/main.min.css”,
    “/scripts/fullcalendar/v4/list/main.min.js”,
    “/scripts/fullcalendar/v4/interaction/main.min.js”

Il est possible de spécifier un chemin absolu (/scripts est relatif au context root).

  1. Que vaut FULLCALENDAR_VERSION ?

Voici un exemple qui marche en mode timeline:

Il faut :

  1. Mettre FULLCALENDAR_VERSION à 4:

  2. Ajouter les fichiers des plugins premium requises dans <tomcat root>/webapps/ROOT/scripts/fullcalendar/v4, ex:

  3. Ajouter les JS et CSS requis dans FULLCALENDAR_LIBS dans le bloc "4":

	"/scripts/fullcalendar/v4/timeline/main.min.css",
	"/scripts/fullcalendar/v4/timeline/main.min.js",
	"/scripts/fullcalendar/v4/resource-common/main.min.js",
	"/scripts/fullcalendar/v4/resource-timeline/main.min.css",
	"/scripts/fullcalendar/v4/resource-timeline/main.min.js",
  1. Faire un clear cache global pour prise en compte de ces changements
  2. Ecrire le code adapté à votre besoin, par exemple ici un objet externe:

Java serveur:

package com.simplicite.extobjects.Application;

public class AppTestTimeline extends com.simplicite.webapp.web.ResponsiveExternalObject {
	private static final long serialVersionUID = 1L;
}

Resource HTML (de type HTML):

<div id="testtimeline"></div>

Resource SCRIPT (de type Javascript):

var AppTestTimeline = AppTestTimeline || (function ($) {
	
	function calendar() {
		new FullCalendar.Calendar($("#testtimeline")[0], {
			plugins: [ 'interaction', 'resourceTimeline' ],
			defaultView: 'resourceTimelineDay',
			aspectRatio: 1.5,
			header: { left: 'prev,next', center: 'title', right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth' },
			editable: false,
			resourceLabelText: 'Rooms',
			resources: 'https://fullcalendar.io/demo-resources.json?with-nesting&with-colors',
			events: 'https://fullcalendar.io/demo-events.json?single-day&for-resource-timeline'
		}).render();
	}

	return { render: function(params) {
		$ui.loadCalendar(calendar);
	}};

})(jQuery);

Parfait, mais de grâce laissez les libs de base dans FULLCALENDAR_LIBS
sinon le calendar (agenda) Simplicité ne fonctionnera plus.

Oui dans mon exemple ci-dessus c’est bien juste un ajout des plugins premium.

Par exemple si on est dans une image Docker le <tomcat root> est /usr/local/tomcat, l’ajout des plugins premium se fait en enrichissant l’image avec un Dockerfile simple genre:

FROM simplicite/platform:latest
COPY <là où ont les plugins premium sur le host>/* /usr/local/tomcat/webapps/ROOT/scripts/calendar/v4

Sur le SIM ça peut aussi s’automatiser via les hooks du SIM.

Etc.

pas de pb pour moi avec le paramètre FULLCALENDAR_LIBS. tout fonctionne bien

J’ai vérifié tous les chemins d’accès, les paramètres système, il s’avérait que le format des doubles quotes nétait pas bon dans le FULLCALENDAR_LIBS…
Désormais, il charge juste les modules core et interaction et ensuite il ne parvient pas à importer les JS restants (pas de problème pour les feuilles de style)

SyntaxError: import declarations may only appear at top level of a module


Dans les 3 fichier qui posent problème, la ligne d’import css ne plait pas

J’ai essayer différents ordres dans le FULLCALENDAR_LIBS, mais ça ne change rien. De quel coté je peux investiguer ?

Je vous ai fourni un exemple détaillé qui marche ci-dessus.

Regardez ce qui est différent dans votre cas. Il y a forcément une différence quelque part.

Pour rappel mon FULLCALENDAR_LIBS vaut:

{"3":[
	"/scripts/fullcalendar/fullcalendar.min.css",
	"/scripts/fullcalendar/fullcalendar.min.js"
],
"4":[
	"/scripts/fullcalendar/v4/core/main.min.css",
	"/scripts/fullcalendar/v4/core/main.min.js",
	"/scripts/fullcalendar/v4/daygrid/main.min.css",
	"/scripts/fullcalendar/v4/daygrid/main.min.js",
	"/scripts/fullcalendar/v4/timegrid/main.min.css",
	"/scripts/fullcalendar/v4/timegrid/main.min.js",
	"/scripts/fullcalendar/v4/list/main.min.css",
	"/scripts/fullcalendar/v4/list/main.min.js",
	"/scripts/fullcalendar/v4/interaction/main.min.js",
	"/scripts/fullcalendar/v4/timeline/main.min.css",
	"/scripts/fullcalendar/v4/timeline/main.min.js",
	"/scripts/fullcalendar/v4/resource-common/main.min.js",
	"/scripts/fullcalendar/v4/resource-timeline/main.min.css",
	"/scripts/fullcalendar/v4/resource-timeline/main.min.js"
]}

Le problème doit forcement venir des ressources utilisées.
Les ressources que je récupère avec npm depuis les repos officiels, en version 4.4.2, ne contiennent pas de fichier js minifié.
J’ai testé en récupérant le code minifié depuis les exemples fullCalendar sur unpkg -https://unpkg.com/@fullcalendar/resource-common@4.4.2/main.min.js ) et ça affiche l’entête du calendrier mais pas le reste. Il y a un problème au niveau du code.

De quel manière est-il préconisé de récupérer les ressources js et css pour que je sois certain d’avoir les bonne sources et qu’il n’y ait pas de conflits de version avec celles déja présentes dans simplicité ?

En tout cas pour toutes vos informations.

Utilisez ce package complet: https://github.com/fullcalendar/fullcalendar-scheduler/releases/tag/v4.4.2

Dans le ZIP il y a un répertoire packages-premium => copiez tout ce qu’il y a dedans dans <webapp root>/scripts/fullcalendar/v4 comme décrit précédement)

PS: Ca n’a pas vraiment de sens d’aller récupérer des JS/CSS un par un depuis un CDN…

Merci. Je sens que je touche a but mais le fullCalendar ne s’affiche toujours pas, du moins pas completement :



Tout le code est identique, les paramètres, les libs sur le host aussi maintenant; A quel autre endroit peut-il y avoir une différence ?
J’ai ajouté schedulerLicenseKey: ‘GPL-My-Project-Is-Open-Source’ mais ça ne fait que retirer le message concernant la licence.